React页面刷新时出现Cannot read properties of undefined (reading 'indexOf')错误的技术问询

嘿，这个问题我之前也碰到过！本质是刷新页面后，你的Redux异步请求还没完成，gettingSingleData.singleproduct还是undefined，这时候直接去访问它的checkes属性调用indexOf，自然就会抛出这个错误。下面给你几个靠谱的解决办法：

1. 在useEffect里先做存在性判断 #

修改你的useEffect，在操作数据前先确认singleproduct和它的checkes属性已经存在，同时别忘了把相关依赖加入数组（不然React会警告，而且数据更新后也不会重新执行）：

useEffect(() => {
  dispatch(allActions.singleProduct(id));
  // 先确保数据已加载，再处理复选框状态
  if (gettingSingleData.singleproduct?.checkes) {
    let newCheckBoxes = [...checkBoxes];
    newCheckBoxes.forEach((obj) => {
      obj.isChecked = gettingSingleData.singleproduct.checkes.indexOf(obj.name) > -1;
    });
    setcheckBoxes(newCheckBoxes);
  }
}, [id, gettingSingleData, checkBoxes]); // 添加必要依赖

这里用了可选链操作符?.，如果singleproduct是undefined，就会直接返回undefined，不会继续访问checkes，避免报错。

2. 给Redux的singleproduct设置默认值 #

在你的Redux reducer里，给singleproduct设置一个初始结构，确保checkes默认是个空数组：

// 示例reducer初始state
const initialState = {
  loading: false,
  singleproduct: { checkes: [] }, // 提前给checkes设空数组
  // 其他状态字段...
};

这样就算异步请求还没回来，gettingSingleData.singleproduct.checkes也是一个空数组，调用indexOf就不会报错了，等真实数据加载完成后，状态会自动更新。

额外小优化：规范状态更新方式 #

你当前的handleCheckChnage直接修改了原state对象，这不符合React的状态更新原则，容易引发奇怪的bug。可以改成这样：

const handleCheckChnage = (cb) => {
  setcheckBoxes(prevCheckboxes => 
    prevCheckboxes.map(obj => 
      obj.name === cb.name ? {...obj, isChecked: !obj.isChecked} : obj
    )
  );
};

这种写法通过map返回新数组和新对象，遵循了Immutable的更新规则，更安全可靠。

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