开发者问题收集

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