更新时，React 钩子状态是未定义的

Question

我有一个简单的 React Hooks 组件。当我尝试使用 setLightState 函数更新 lightState 时，它会返回当前状态的undefined。访问返回正文中的状态工作正常。

const MainControl = () => {
const [lightState, setLightState] = useState()
const [lightChan, setLightChan] = useState()
const updateLight = (newState) => {
setLightState({...lightState, ...newState})
}
useEffect(() => {
socket.connect()
let chan = socket.channel("lights:dioder")
chan.join().receive("ok", (response) => {
setLightState(response)
setLightChan(chan)
})
chan.on("light_colour", (resp) => {
updateLight(resp)
})
return () => {
chan.leave()
}
}, [])
if (!lightChan) return <h2>Loading...</h2>
return (
<h2>Lights are currently {lightState.on ? "on" : "off"}</h2>
)
}

updateLight函数将lightState读作undefined，但返回体没有？我认为这可能只在第一次渲染时是正确的，但我不确定。

谢谢

Answer 1

updateLight(resp)

用于chan.on的回调函数中，当你声明chan.onlightState是未定义的。因此，每当触发chan.on的回调时，setLightState的值都是未定义的(JS的闭包(。 如果要使用以前的状态值设置新状态，则需要传递一个函数来setLightState

setLightState(prevLightState => ({...prevLightState, ...newState}))

Answer 2

当您使用useState初始化状态时，您没有为lightState设置初始值。 您可以将其初始化为空对象useState({})并且它应该可以工作。

另请参阅在因变量更改时使用useCallback更新函数参数。

有关更多详细信息，请参阅声明状态变量和使用回调。