React中useState更新JSON对象状态未生效问题排查

React中useState触发的状态更新是异步批处理机制，调用setShopCart不会立刻修改当前函数作用域内的shopCart变量，更新会被推入队列，等当前同步执行栈全部执行完毕后，React才会统一处理更新、触发组件重渲染，重渲染时新的状态值才会生效。

你在setShopCart调用后立刻同步执行console.log(shopCart)，拿到的是当前函数闭包捕获的旧状态值，自然打印的还是初始的{Description: "Apple"}——实际上你的状态更新逻辑本身写法是正确的，只是打印时机不对，才误以为更新失败。

你看到的控制台输出完全符合React的执行顺序：

1. 事件触发后先执行disptechProductUpdate内的同步代码，依次打印入参prod、临时变量updatedValue，二者都是你传入的{Description: 'Fruits'}，输出正常
2. setShopCart被调用，更新任务入队，此时状态未发生实际修改
3. 同步执行后续的console.log(shopCart)，读取当前闭包内的旧状态，输出{Description: 'Apple'}
4. 同步代码执行完毕，React处理更新队列，组件重渲染，此时shopCart已经是合并后的新值

• 不要在setState调用后同步读取状态，根据场景选以下两种方式获取更新后的值：
  • 直接在组件函数顶层读取/打印状态，每次组件重渲染拿到新状态时都会执行对应逻辑
  • 用useEffect监听目标状态，状态更新完成、组件重渲染后会自动执行副作用内的逻辑
• 额外注意：原生button元素不触发onChange事件，如果你使用的是原生按钮，需要把事件绑定改为onClick，避免事件无法触发的问题。

修正后的可运行代码示例：

import { useState, useEffect } from 'react';

// 组件内
const [shopCart, setShopCart] = useState({Description:"Apple"});

// 顶层直接读取，每次状态更新重渲染都会输出最新值
console.log('渲染时拿到的shopCart：', shopCart);

const disptechProductUpdate = (prod: any) => {
  setShopCart(prevCart => ({
    ...prevCart,
    ...prod
  }));
}

// 监听状态变化，更新完成后执行逻辑
useEffect(() => {
  console.log('shopCart更新完成：', shopCart);
}, [shopCart])

// 按钮绑定点击事件
<button onClick={() => disptechProductUpdate({ Description: "Fruits" })}>Print</button>

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