反应状态对象丢失内容

Question

问题：
- 我有一个状态变量（对象），我通过 2 个异步函数填充它。
- 当此变量更改时，会调用我的

useEffect()

。这种情况发生两次（如预期）。
- 但是 每次我给一个键赋值时，另一个键值都是空的！
...为什么？

称为“pageData”的状态变量：

interface DataState {
    marketData: any[]
    totalCash: number
}
const [pageData, setPageData] = useState<DataState>({
    marketData: [],
    totalCash: 0
});

有 2 个异步函数从服务器加载数据：

setPageData({...pageData, totalCash: 821916.994425});

...还有另一个...

setPageData({...pageData, marketData: [{test: 1}, {test: 2}, {test: 3}]});

我的useEffect事件：

useEffect(() => {
    console.log('event useEffect pageData', pageData);
}, [pageData]);

...

Answer 1

当您想根据先前的值更新状态值时，最好使用状态更新器模式。

setPageData(prev => ({...prev, totalCash: 821916.994425}));

setPageData(prev => ({...pageData, marketData: [{test: 1}, {test: 2}, {test: 3}]}));

这样，state的值就永远是最新的。

虽然您没有显示在哪里调用这些状态更新，但我怀疑这可能是问题所在。