React中如何多次快速更新状态数组且避免setState覆盖问题？

你遇到的这个问题其实很常见，核心原因在于React的useState更新是异步的，而且当多个更新操作同时触发时，如果都是基于当前渲染周期的旧状态来生成新状态，就会出现后执行的更新覆盖前面的情况。下面给你两种最常用的解决方案：

1. 使用函数式更新（最直接的修复方式） #

不要直接基于当前的childFound状态创建副本，而是给setChildFound传入一个接收最新状态作为参数的函数，让React每次都用最新的状态来生成新数组。这样所有的更新操作都会排队执行，不会互相覆盖。

比如子组件中需要更新对应索引的布尔值时，应该这么写：

// 假设子组件知道自己对应的索引index，要设置的新值newValue
setChildFound(prevChildFound => {
  // 先复制一份最新的数组（避免直接修改原状态）
  const updatedArray = [...prevChildFound];
  // 修改对应索引的值
  updatedArray[index] = newValue;
  return updatedArray;
});

或者用map方法更安全（尤其适合处理动态行数的表格）：

setChildFound(prevChildFound => 
  prevChildFound.map((isFound, idx) => 
    idx === index ? newValue : isFound
  )
);

这种方式的本质是让React帮你管理状态的更新顺序，每次更新都基于上一次更新后的最新状态，自然就不会出现覆盖问题了。

2. 用useReducer管理复杂状态（适合逻辑较多的场景） #

如果你的表格行更新逻辑比较复杂，或者后续还要添加更多和childFound相关的状态操作，推荐用useReducer来替代useState。它能把状态更新逻辑集中到一个reducer函数里，代码更易维护，也能更好地处理多个并发更新。

示例代码如下：

// 第一步：定义reducer函数，处理状态更新逻辑
const childFoundReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_ROW_STATUS':
      return state.map((isFound, idx) => 
        idx === action.payload.index ? action.payload.value : isFound
      );
    // 后续可以添加更多操作类型，比如重置全部状态
    case 'RESET_ALL':
      return state.map(() => false);
    default:
      return state;
  }
};

// 第二步：在组件中初始化useReducer
const [childFound, dispatch] = React.useReducer(childFoundReducer, []);

// 第三步：子组件中触发更新
// 假设子组件拿到index和newValue
dispatch({
  type: 'UPDATE_ROW_STATUS',
  payload: { index, value: newValue }
});

这样所有的状态更新都通过dispatch触发，reducer会确保每次更新都基于最新的状态，同样不会出现覆盖问题，而且代码结构更清晰。

为什么原来的方式会出问题？ #

你之前直接复制childFound生成新数组再调用setChildFound，是因为多个子组件触发更新时，它们拿到的childFound都是当前渲染周期的旧状态（因为React还没来得及更新状态）。每个子组件都基于同一个旧数组修改，最后一个调用setChildFound的操作会把前面的修改全部覆盖掉，自然只有最后一个生效。

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