如何在第三方事件处理程序中使用最新的状态/值

Question

给定如下内容：

function MapControl() {
const [countries, setCountries] = useContext(CountriesContext)
useEffect( () => {
ThirdPartyApi.OnSelectCountry((country) => {
setCountries([...countries, country])
})
})
return (<ThirdPartyApi.Map />)
}

我遇到的问题是，对setCountries的调用无法按预期工作，因为countries数组不是从ThirdPartyApi提供的自定义事件处理程序的上下文中更新的。

什么是一种干净的建模方式？我可以在事件处理程序中只更新一个本地可变数组，但这不会从其他组件中获取对countries的任何更改，因此感觉注定会导致问题。

Answer 1

您可以使用函数更新来使用最新值修改状态，而不是从过时的闭包中捕获它：

function MapControl() {
const [countries, setCountries] = useContext(CountriesContext)
useEffect( () => {
ThirdPartyApi.OnSelectCountry((country) => {
setCountries((prev) => [...prev, country])
})
return () => {
// unregister event handler
}
}, [])
return (
<ThirdPartyApi.Map />
)
}

此外，请确保指定useEffect()的依赖项，这样就不会在每次重新渲染时触发副作用。在这种情况下，您的副作用没有任何依赖关系，因此它应该是空的[]。

最后，确保在组件卸载时清理效果。在这种情况下，您需要在useEffect()返回的回调中注销事件处理程序。