时间戳

首页 > 解决方案 > 如何在 3rd 方事件处理程序中使用最新的状态/值？

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

问题描述

给定类似的东西：

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

  return (<ThirdPartyApi.Map />)
}

我的问题是调用setCountries无法按预期工作，因为countries数组没有从ThirdPartyApi.

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

标签： javascriptreactjsreact-hooksreact-context

解决方案

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

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

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

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

  return (
    <ThirdPartyApi.Map />
  )
}

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

最后，确保在卸载组件时清理您的效果。在这种情况下，您需要在从useEffect().

推荐阅读