javascript - React setstate 不会将旧状态合并到新状态

Question

根据许多示例，这应该有效：

const [_timeseries, $timeseries] = useState({hi:'lol'})

useEffect(() => {

socket.on('plot', e => {
 let keyname = Object.keys(e)[0]
 $timeseries({..._timeseries, [keyname] : value)})
}

}, [])

console.log(_timeseries) // here results in the initial state, not the set state

第一次合并时，它可以工作。但是一旦一个带有另一个键名的新事件进入，它就会再次替换整个事件。不是使用 [keyname] 添加新密钥，而是替换旧的 [keyname]。

Answer 1

useState 钩子为您提供了一个函数，该函数将状态完全替换为新值（不合并）：https ://reactjs.org/docs/hooks-state.html

However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.

您可以将 setState 与函数一起使用并自行合并：

$timeseries((old) => ({...old, [keyname] : value)}))

如果您在没有函数的情况下使用它，它可能具有旧值（因为您没有将其指定为 useEffect 的依赖项）

Answer 2

这里的问题是闭包。

分配给 的回调useEffect关闭了它的词法范围的初始值，_timeseries并且它永远不会更新。

要修复它，您需要使用在其回调中使用最新状态的函数：useState

const [_timeseries, $timeseries] = useState({hi:'lol'})

useEffect(() => {
socket.on('plot', e => {
 let keyname = Object.keys(e)[0]
 $timeseries(timeSeries => {...timeseries, [keyname] : value)})
}

}, [])