React JS：useState数组无法实时更新的问题求助

我通过useState定义了一个数量数组，期望通过按钮点击事件更新其中指定对象的quantity值。点击时会创建新数组并更新对应项的数值，随后调用setQuantities设置新数组，但数组无法实时更新：例如更新第二项的数量后，新数组已生成正确值，但原quantities数组未发生变化；再次点击按钮时，原数组会更新为前一次新数组的数值。

状态数组定义代码 #

/*state array for quantity*/
const [quantities, setQuantities] = useState([
    {id: 1, quantity:0},
    {id: 2, quantity:0},
    {id: 3, quantity:0},
    {id: 4, quantity:0},
    {id: 5, quantity:0},
    {id: 6, quantity:0},
    {id: 7, quantity:0},
    {id: 8, quantity:0},
    {id: 9, quantity:0},
    {id: 10, quantity:0}]);

数量递增函数代码 #

/*Incrementing Quantity*/
const increment = () =>{
    const newQuantity = quantities.map(obj => {
        if (obj.id === info.id) {
          return {...obj, quantity: obj.quantity+1};
        }
        return obj;
      });
      console.log(newQuantity)
    setQuantities(newQuantity);
    console.log(quantities)
}

控制台日志显示：第一次点击后，newQuantity中对应项的quantity已成功+1，但console.log(quantities)输出的仍是更新前的旧数组；第二次点击时，quantities才会变为第一次点击后的新数组值。

核心原因 #

React中useState的更新函数（setQuantities）是异步操作。调用setQuantities后，React不会立即修改quantities变量，而是将更新任务加入任务队列，等待组件下一次渲染周期才会完成状态更新并重新渲染。因此在调用setQuantities后立刻打印quantities，得到的必然是更新前的旧值，这属于正常的React状态更新机制，并非代码bug。

解决方案 #

1. 监听状态变化执行后续逻辑
   如果需要在quantities更新后执行特定操作，可使用useEffect钩子监听状态变化：

import { useEffect } from 'react';

useEffect(() => {
    console.log('更新后的quantities:', quantities);
    // 这里编写状态更新后的业务逻辑
}, [quantities]); // 依赖数组传入quantities，仅当它变化时触发回调

2. 采用函数式更新避免闭包问题
   当更新逻辑依赖于前一次的状态值时（比如快速连续点击按钮的场景），推荐使用函数式更新，确保每次都获取到最新的状态：

const increment = () =>{
    setQuantities(prevQuantities => {
        const newQuantity = prevQuantities.map(obj => {
            if (obj.id === info.id) {
                return {...obj, quantity: obj.quantity + 1};
            }
            return obj;
        });
        console.log(newQuantity);
        return newQuantity;
    });
}

这种方式下，React会将最新的前一次状态作为参数传入回调函数，彻底避免因闭包导致的旧状态引用问题。

3. 依赖渲染后的状态值
   如果只是需要在页面上展示数量，无需在increment函数内打印状态——组件重新渲染后，quantities会自动更新为最新值，直接在渲染逻辑中使用即可（例如<span>{quantities.find(item => item.id === info.id)?.quantity}</span>）。

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