React使用useState循环更新对象状态时仅最后一项生效如何解决？

问题原因 #

这是React状态批处理特性+闭包捕获旧状态导致的典型问题：

• 你在forEach循环中多次调用setError时，每次展开的error都是当前渲染周期里固定的旧状态值，不会读取前一次setError更新后的中间状态
• React会把同一个同步任务里的多次状态更新合并执行，最终只有最后一次的更新结果会生效，因此error对象里只会保留最后一个输入框的key

解决方案 #

方案1：先构建完整错误对象再单次更新（推荐） #

提前计算好完整的error对象，只调用一次setError，仅触发一次重渲染，性能最优：

if (emptyInputs.length) {
  // 先复制原有error状态
  const newError = { ...error };
  emptyInputs.forEach(key => {
    newError[key] = true;
  });
  // 一次性提交更新
  setError(newError);
}

方案2：使用函数式更新读取最新状态 #

如果需要在循环中多次更新，可使用setState的函数式写法，每次都能拿到上一次更新后的最新状态：

if (emptyInputs.length) {
  emptyInputs.forEach(key => {
    // 入参prevError是上一次更新后的最新状态
    setError(prevError => ({ ...prevError, [key]: true }));
  });
}

该方案虽然可以实现需求，但会触发多次状态更新，性能略低于方案1。

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