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

Question

鉴于类似：

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

  return (<ThirdPartyApi.Map />)
}

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

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

Answer 1

您可以使用functional update 使用最新值修改您的状态，而不是从陈旧的闭包中捕获它：

function MapControl() {
  const [countries, setCountries] = useContext(CountriesContext)

  useEffect( () => {
    ThirdPartyApi.OnSelectCountry((country) => {
      setCountries((prev) => [...prev, country])
    })

    return () => {
      // unregister event handler
    }
  }, [])

  return (
    <ThirdPartyApi.Map />
  )
}

还要确保specify your dependencies 为useEffect()，这样您就不会在每次重新渲染时触发副作用。在这种情况下，你的副作用没有任何依赖，所以它应该是空的[]。

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