React状态对象赋值时丢失其他键值对问题求助

问题原因 #

这是React状态更新的闭包陷阱导致的。你的两个异步函数执行时，捕获的都是组件初始渲染时的pageData状态（即marketData: [], totalCash: 0）：

• 第一个异步调用setPageData({...pageData, totalCash: ...})时，只会更新totalCash，marketData仍为初始空数组；
• 第二个异步调用时，同样基于初始的pageData更新，修改marketData的同时，totalCash会被重置为初始值0。
  因此每次更新都会覆盖掉另一个字段的最新值。

解决方案 #

使用函数式更新，给setPageData传入一个函数，该函数接收当前最新的状态作为参数，返回新的状态对象，确保每次更新都基于最新状态修改：

修改后的赋值操作代码：

// 更新totalCash
setPageData(prevData => ({...prevData, totalCash: 821916.994425}));

// 更新marketData
setPageData(prevData => ({...prevData, marketData: [{test: 1}, {test: 2}, {test: 3}]}));

这里的prevData始终是组件当前最新的状态值，解构后修改指定字段，就能保留另一个字段的最新值，不会出现被重置为空/初始值的问题。

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