React中await后仍获取旧state数据的原因及解决方案

异步加载API数据更新数组状态时，出现了奇怪的现象：明明useEffect已经触发并输出了更新后的数组，但await结束后，异步代码里的items还是旧状态值。比如点击触发请求，等待几秒后添加到列表，addItemFromAPI里await之后打印的items.length始终是原始值。代码示例如下：

const [items, setItems] = useState([]);

useEffect(() => {
  console.log(`${items.length} items`);
}, [items]);

const addItemFromAPI = async () => {
  const name = await getNextItemFromAPI();
  // 这里的items仍是await之前的旧副本
  console.log(`${items.length} existing items`);
  setItems([...items, { name }]);
};

改用useRef的.current.push()能正常工作，想知道哪里操作有误，以及异步追加数据到state的正确模式是什么？

这是JavaScript闭包特性导致的：当addItemFromAPI函数被创建时，它捕获了当前渲染周期的items状态值。在await等待API响应的这段时间里，哪怕组件因为其他原因重新渲染、items已经更新，当前这个addItemFromAPI函数里的items还是它创建时绑定的旧值——函数一旦创建，闭包里的变量就固定为当时的状态快照。

1. 使用函数式更新（推荐） #

调用setItems时，传入一个接收最新状态快照的函数，React会自动把当前最新的items值传给这个函数，完全规避闭包带来的旧值问题：

const addItemFromAPI = async () => {
  const name = await getNextItemFromAPI();
  // prevItems是React传入的最新状态
  setItems(prevItems => [...prevItems, { name }]);
};

这种方式符合React状态更新的规范，能保证每次都基于最新状态修改，不会出现状态覆盖或读取旧值的问题。

2. 用useRef跟踪最新值（特殊场景使用） #

如果需要在异步代码里随时读取最新的状态值，可以用useRef——ref.current是可变的，不会被闭包捕获固定值：

const [items, setItems] = useState([]);
const itemsRef = useRef(items);

// 同步ref和state的最新值
useEffect(() => {
  itemsRef.current = items;
}, [items]);

const addItemFromAPI = async () => {
  const name = await getNextItemFromAPI();
  // 这里能拿到最新的items
  console.log(`${itemsRef.current.length} existing items`);
  setItems([...itemsRef.current, { name }]);
};

注意：useRef的变化不会触发组件重渲染，所以它只适合用来读取最新值，修改状态必须通过setItems完成。

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