在setState中直接遍历state还是prevState？哪种方式更优？

问题背景 #

我有一个对象数组状态，需要遍历数组将每个项的selected值重置为false，初始状态代码如下：

// Amount data state
const [amountData, setAmountData] = useState([
  {
    id: 30,
    amount: (30000).toLocaleString(),
    selected: true,
  },
  {
    id: 10,
    amount: (10000).toLocaleString(),
    selected: true,
  },
  {
    id: 70,
    amount: (70000).toLocaleString(),
    selected: true,
  },
  {
    id: 50,
    amount: (50000).toLocaleString(),
    selected: true,
  },
]);

我想知道在调用setState更新状态时，直接遍历当前state（amountData）和遍历prevState这两种方式哪种正确，以及各自的优势是什么？

以下是两种实现方式：

方式一：直接使用当前state #

// Reset selection
setAmountData(
  amountData.map(amount => {
    return {
      ...amount,
      selected: false,
    };
  }),
);

方式二：使用prevState回调 #

// Reset selection
setAmountData(prevState =>
  prevState.map(amount => {
    return {
      ...amount,
      selected: false,
    };
  }),
);

两种方式的正确性与优势 #

1. 两种写法都合法，但适用场景不同 #

• 直接使用当前state：只要你能确定当前amountData是最新的状态值，这种写法完全没问题。比如这个重置操作是独立触发的，没有其他并发的状态更新，当前组件渲染周期里amountData没被修改过，直接用它生成新状态就很可靠。
• 使用prevState回调：这是React官方更推荐的「状态更新依赖前一次状态」时的写法，它能保证你拿到的绝对是最新的状态快照，不会因为React的批量更新、闭包捕获旧值等问题出bug。

2. 各自的优势 #

直接使用当前state的优势

• 写法直观简洁，代码量少，不用理解回调逻辑，适合简单、无并发更新的场景。

使用prevState回调的优势

• 规避闭包陷阱：函数组件中state是被闭包捕获的，如果更新操作在异步回调（比如setTimeout、网络请求回调）里执行，直接用当前amountData可能拿到旧值，导致更新错误。而prevState会从React状态队列取最新值，完全避免这个问题。
• 支持批量更新：React会对连续的setState做批量处理，用回调式更新时，每一次更新都基于前一次的最新状态，不会出现状态覆盖。比如多个连续更新操作，回调写法能保证它们按顺序正确执行。
• 逻辑更稳妥：复杂组件中，当状态更新依赖前一次状态时，用prevState不用纠结当前state是否是最新的，可靠性拉满。

总结 #

如果状态更新逻辑不依赖前一次状态的最新值，或者能确保当前state是最新的，直接用当前state写法没问题；但如果更新依赖前一次状态，或者存在异步操作、批量更新场景，一定要用prevState回调方式，这能避免绝大多数状态更新的潜在问题。

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