React useState设置对象类型state不更新、输出[Object object]问题求解

问题根因 #

• React 状态更新为异步批量调度机制，调用setAccountInfo(account)后不会立刻修改当前函数闭包内的accountInfo变量。当前onLogin函数捕获的accountInfo始终是本次组件渲染时的初始值（即你定义的空对象{}），setAccountInfo只是向 React 提交了状态更新请求，要等组件完成下一次重新渲染后，才能拿到更新后的状态值，await 等待多长时间都不会修改当前闭包内的变量值。
• 打印输出[Object object]是字符串拼接的正常表现：当你执行"acc " + accountInfo时，JS 会自动调用对象的toString()方法，普通对象的默认 toString 返回值就是[Object object]，不能作为状态未更新的判断依据。

验证与修复方案 #

1. 要确认状态是否更新成功，直接在组件顶层作用域打印accountInfo，组件每次重渲染都会执行这段逻辑，可以拿到最新的状态值：

const [accountInfo, setAccountInfo] = useState({})
// 新增如下打印，状态更新触发重渲染后会输出最新值
console.log('更新后的accountInfo：', accountInfo)

2. 如果你需要在调用setAccountInfo后立刻使用最新的账户数据，直接复用你已经拿到的account变量即可，不需要从 state 中取值：

setAccountInfo(account);
await delay(4000);
// 直接使用已有的account变量
console.log("acc ", account);

你的场景下状态其实已经正常提交更新了，组件下一次渲染就会拿到正确的accountInfo值，不属于状态更新失败的问题。

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