React Redux页面刷新报Cannot read property 'pourcent' of undefined如何解决

问题根源 #

• 未触发数据请求：你的组件中引入了useDispatch但没有调用getMonthObjectif接口拉取数据，页面刷新后Redux状态会重置，getMonthObjectif始终为初始的undefined状态。你之前从其他页面跳转时运行正常，是因为前序页面已经触发过接口请求，数据已经存在Redux store中可以直接读取。
• 异步请求时序问题：就算你触发了请求，axios请求是异步的，第一次组件渲染的时候接口还没返回结果，objectif还是undefined，直接访问它的pourcent/validation等属性就会抛出类型错误。
• 初始状态未设置兜底：reducer的initialState是空对象，没有给getMonthObjectif设置默认空值，进一步放大了上述问题。

修复方案 #

1. 组件内触发数据请求 #

在组件中导入getMonthObjectif action，新增useEffect在组件挂载时触发请求：

// 顶部导入调整，删除没用的getAllTcheksByEtat，新增目标action导入
import Button_Drop from "../../../../components/Buttons/Button_Drop";
import Chart_Objectif from "../../../../components/Charts/Chart_Objectif";
import { useDispatch, useSelector } from "react-redux";
import { getMonthObjectif } from "../../../../actions/objectifs.action";
import { useEffect } from "react";

function Card_Objectifs() {
    const dispatch = useDispatch();
    // 取数据时加兜底默认值
    const objectif = useSelector((state: any) => state.objectifsReducer.getMonthObjectif) || {};
    console.log(objectif);

    // 组件挂载时拉取数据
    useEffect(() => {
        dispatch(getMonthObjectif());
    }, [dispatch]);

    // 原有return逻辑...
}

2. 访问属性时加可选链兜底 #

修改模板中读取objectif属性的部分，用可选链避免读取undefined属性报错，同时可以给无数据场景设置默认值：

<div className="chartWrapper">
    <Chart_Objectif data={objectif?.pourcent?.replace("%", "") || 0} />
</div>
<div className="goalWrapper">
    <div className="goalCard">
        <h2>Complétés</h2>
        <h3>{objectif?.validation || 0}</h3>
    </div>
    <div className="goalCard">
        <h2>Objectif</h2>
        <h3>{objectif?.objectifs || 0}</h3>
    </div>
</div>

3. 可选优化：reducer加初始默认值 #

修改reducer的initialState，给getMonthObjectif设置默认空对象，进一步兜底避免异常：

const initialState = {
    getAllObjectifs: [],
    getAllObjectifsSpe: [],
    getMonthObjectif: {}
};

4. 可选优化：加加载状态 #

你已经在action中维护了isLoading状态，可以在组件中读取loading状态，请求完成前显示加载占位，避免出现空白或者异常值。

内容的提问来源于stack exchange，提问作者VinceBLT