React调用setState更新数据不立即生效，需触发两次才更新问题求助

问题原因 #

• React 的 useState 更新函数是异步批量执行的，你调用 setTransactionDetail 后，当前 addProduct 函数的执行上下文里的 transactionDetail 仍然是本次组件渲染时的旧值，所以直接 console.log 会打印旧状态，让你误以为第一次调用没有更新，实际更新已经进入 React 调度队列，组件下一次渲染就会拿到最新值。你看到的「调用两次才生效」，本质是第二次调用时，组件已经完成了第一次更新，函数作用域拿到的是第一次更新后的状态，所以打印结果符合你的预期。
• 如果新状态依赖上一次的旧状态值，直接展开当前作用域的 transactionDetail 可能会因为闭包捕获旧值，导致更新不符合预期，这种场景需要用函数式更新写法。

解决方法 #

1. 改用函数式更新保证状态正确性 #

修改 addProduct 中的更新逻辑，给 setTransactionDetail 传入函数，函数的入参就是上一次的最新状态，避免闭包问题：

const addProduct = () => {        
  const price = product.price * quantity;        
  setTransactionDetail(prevDetail => ({
    ...prevDetail,
    quantity: quantity,
    product: product,
    price: price 
  }));
};

2. 查看更新后的状态 #

如果需要在状态更新完成后执行后续逻辑，通过 useEffect 监听 transactionDetail 的变化即可拿到最新值：

import { useEffect } from 'react';

// 依赖数组放入transactionDetail，状态更新后自动触发
useEffect(() => {
  console.log('更新完成的transactionDetail：', transactionDetail);
}, [transactionDetail]);

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