Javascript TypeError:无法读取未定义react redux的属性

我有一个功能组件，一切正常，但在重新加载页面时出现以下错误：

TypeError:无法读取未定义的属性“pourcent”

以下是组件：

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;

减速器文件：

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）也会出现同样的错误

---

谢谢

您是否尝试过检查目标是否有效？您可以添加验证：

            {objectif ? <Chart_Objectif data={objectif.pourcent.replace("%", "")} /> : <></>

{objectif？：

您的初始状态为空对象。React将在api完成之前开始渲染。因此，

pourcent

不会在空对象中退出。您可以尝试以下选项：1.创建一个空白结构作为初始状态，以便有一些默认数据。2.使用加载标志在redux中表示api请求状态，并且不渲染/读取sta直到这是真的。@VijayDev谢谢你，现在我知道发生了什么：）效果很好，非常感谢：）

            {objectif ? <Chart_Objectif data={objectif.pourcent.replace("%", "")} /> : <></>