React中useEffect异常调试：更新targets状态后未触发问题排查

问题根源 #

你在addTarget函数里直接修改了原状态数组的引用：

let t = targets;
t.push(target);
setTargets(t);

这里t是原targets数组的引用，push操作直接修改了原数组，随后把同一个引用传给setTargets。React判断状态是否更新的逻辑是引用比较——因为前后状态的引用没有改变，React会认为状态没有发生变化，因此不会触发依赖targets的useEffect。

修正方法 #

必须创建新的数组引用，让React识别到状态更新：

• 扩展运算符创建新数组：

const addTarget = (target) => {
  setTargets([...targets, target]);
}

• 使用concat生成新数组：

const addTarget = (target) => {
  setTargets(targets.concat(target));
}

• 函数式更新（适合依赖前一次状态的场景，避免闭包问题）：

const addTarget = (target) => {
  setTargets(prevTargets => [...prevTargets, target]);
}

调试思路 #

遇到这类状态更新异常时，可以按以下方式排查：

• 检查引用类型状态的更新逻辑：数组、对象这类引用类型，绝对不能直接修改原状态，必须返回新的引用。
• 在setTargets后打印targets === t，如果结果为true，说明你传递了同一个引用，React不会触发更新。
• 在组件函数顶部打印targets，观察每次渲染时的引用是否变化，确认状态是否真的完成更新。

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