React中useState的两种setItems状态更新写法有何差异？

你提到的这两种写法，核心差异在于是否能确保拿到最新的状态值，具体区别如下：

1. 直接使用当前state的写法：setItems([...items, item]); #

这种写法是直接读取当前作用域里的items变量，基于它生成新数组。在简单场景下（比如你的示例里只调用一次setItems），两种写法效果完全一样。但它有个隐患：

• React的state更新是批量异步的，当前渲染周期内的state不会立刻改变。如果在同一个函数里多次调用setItems，或者在异步回调（比如setTimeout、网络请求）里更新状态，这里的items会是闭包捕获的旧值，导致更新不符合预期。

举个反例：

const addItemTwice = () => {
  // 两次更新都会基于同一个旧的items，最终数组只会多一个元素
  setItems([...items, item]);
  setItems([...items, item]);
};

2. 函数式更新写法：setItems((prev) => [...prev, item]); #

这种写法是给setItems传入一个回调函数，React会自动把最新的前一次状态值作为参数（也就是prev）传给这个函数，你基于这个最新值生成新状态。

• 不管是同步批量更新，还是异步回调里的更新，都能确保拿到的是最新的state，从根源上避免闭包导致的旧值问题。

还是刚才的反例，用函数式更新就会符合预期：

const addItemTwice = () => {
  // 第二次更新会基于第一次更新后的最新状态，最终数组会多两个元素
  setItems(prev => [...prev, item]);
  setItems(prev => [...prev, item]);
};

总结 #

• 如果你的状态更新完全不依赖旧状态（比如直接设置固定值setItems(["Apple", "Banana"])），两种写法都可以用；
• 只要更新依赖于之前的状态（比如数组追加、计数累加），优先用函数式更新，能避免很多潜在的bug。

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