TypeError:无法读取未定义的 react redux 的属性
2021-05-26
514
我有一个功能组件,并且一切运行良好,但是重新加载页面时出现此错误:
TypeError: Cannot read property 'pourcent' of undefined
这是组件:
import Button_Drop from "../../../../components/Buttons/Button_Drop";
import Chart_Objectif from "../../../../components/Charts/Chart_Objectif";
import { useDispatch, useSelector } from "react-redux";
import { getAllTcheksByEtat } from "../../../../actions/tcheks.action";
function Card_Objectifs() {
const objectif = useSelector((state: any) => state.objectifsReducer.getMonthObjectif);
console.log(objectif);
return (
<div className="ObjCard">
<div className="titleObj">
<h1>Ce mois</h1>
<Button_Drop
name="Total"
section={["VDR", "FLASH", "EDL", "DIAGS", "VV", "CATNAT", "DEFIB", "Total"]}
onclick={() => {}}
data={[]}
/>
</div>
<div className="chartWrapper">
<Chart_Objectif data={objectif.pourcent.replace("%", "")} />
</div>
<div className="goalWrapper">
<div className="goalCard">
<h2>Complétés</h2>
<h3>{objectif.validation}</h3>
</div>
<div className="goalCard">
<h2>Objectif</h2>
<h3>{objectif.objectifs}</h3>
</div>
</div>
</div>
);
}
export default Card_Objectifs;
这是操作:
export const getMonthObjectif = () => {
return (dispatch: any) => {
dispatch(isLoading(true));
return axios
.get(`objectif/getMonthObjectif`)
.then((res) => {
dispatch(isLoading(false));
dispatch({ type: GET_MONTH_OBJECTIF, payload: res.data });
})
.catch((err) => {
console.log(err);
dispatch(isLoading(false));
});
};
};
reducer 文件:
import {
GET_ALL_OBJECTIFS,
GET_ALL_OBJECTIFS_SPE,
GET_MONTH_OBJECTIF,
} from "../actions/objectifs.action";
const initialState = {};
export default function objectifsReducer(state = initialState, action: any) {
switch (action.type) {
case GET_ALL_OBJECTIFS:
return {
...state,
getAllObjectifs: action.payload,
};
case GET_ALL_OBJECTIFS_SPE:
return {
...state,
getAllObjectifsSpe: action.payload,
};
case GET_MONTH_OBJECTIF:
return {
...state,
getMonthObjectif: action.payload,
};
default:
return state;
}
}
重新加载后,我尝试显示其他数据时也出现同样的错误(objectif.validation 和 objectif.objectifs)。
谢谢
1个回答
您是否尝试过检查 objectif 是否有效?您可以添加验证:
{objectif ? <Chart_Objectif data={objectif.pourcent.replace("%", "")} /> : <></>
Pitter
2021-05-26