React迭代状态数组时调用setData会产生何种行为？

核心结论 #

• save函数执行时，data是当前状态的快照副本，后续调用setData只会更新React组件的状态，不会修改save函数里已经捕获的这个data变量。
• forEach是基于初始的快照数组启动遍历的，整个迭代过程会完全沿用最初的数组元素，不会响应后续setData带来的状态变化。

额外注意：你的代码无法保证顺序执行 #

你当前的forEach+async/await写法，根本做不到按顺序执行每个元素的异步操作——因为forEach不会等待每个异步回调完成，会一次性触发所有元素的post/update/publish调用，所有异步操作会并行执行，这和你想要的顺序执行需求完全不符。

要实现真正的顺序执行，需要改成for...of循环：

async save() {
  // 基于快照数组顺序遍历
  for (const item of data) {
    await post();
    await update();
    await publish();
  }
}

关于React的状态机制 #

React的状态更新是异步批量更新的，但这只会影响组件重新渲染时拿到的新状态，不会回溯修改已经在函数里捕获的状态快照——因为状态本身是不可变的，setData是生成新的状态数组，而不是修改原数组。所以哪怕在save执行过程中调用setData，也只会让组件后续渲染用新数组，不会干扰save里正在处理的旧数组。

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