React中修改useState状态后useEffect钩子未触发问题求助

核心问题 #

你在更新badgeStates状态时，直接修改了原数组的内容，并且将同一个数组引用传递给setBadgeStates。React的状态更新采用浅比较机制：当新状态与旧状态的引用相同时，会判定状态未发生变化，不会触发组件重渲染，因此依赖badgeStates的useEffect钩子也不会执行。

看这段有问题的代码：

let states = badgeStates;
states[value[1]] = true;
setBadgeStates(states);

这里states只是原状态数组的引用，修改states本质是修改原状态，传递给setBadgeStates的还是原来的数组引用，React无法识别状态更新。

解决办法 #

更新状态时必须创建新的数组引用，让React能检测到状态变化。可以通过数组展开运算符、slice()或map()生成新数组：

修改后的callbackfn代码：

const callbackfn = (value) => {
  if (value[0] === true) {
    console.log(value);
    // 生成新数组并修改指定位置的值
    const newStates = [...badgeStates];
    newStates[value[1]] = true;
    setBadgeStates(newStates);
  } else {
    console.log(value);
  }
};

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