在 child 的 useEffect 中访问 EventListener 调用的函数内的父状态

Question

我有一个看起来像这样的组件：

const [someState,setSomeState] = useState()

const onResize = (data) => {
    // do some stuff with someState
}


return <MyContainer onResize={onResize}>
  ... various children
</MyContainer>

MyContainer组件看起来像这样：

const MyContainer = ({onResize}) => {

  useEffect(() => {
    addEventListener((data) => {
      onResize(data)
    })
    return cleanUpListener()
  }, [])

  // ...
}

我的问题是在onResize() someState第一个组件中不是最新的。 我知道useEffect()创建了一个闭包，所以我只能在初始化时访问状态值。 我想我可以将onResize添加为useEffect()的依赖项，但这似乎不太好，因为那样我的事件侦听器将非常频繁地被销毁和重新创建。

我正在寻找的是一种在组件安装上创建单个事件侦听器的干净方法，能够访问其回调中的状态，并在卸载时将其拆解。 我尝试了很多东西并环顾四周，似乎很奇怪没有解决方案。 我对反应还很陌生，所以我希望更有经验的人可以为我指出一种优雅的方式来做这样的事情。

Answer 1

我不是 100% 确定您想要什么，但是您可以将someState作为道具传递给您的子组件。 添加它作为useEffect的依赖useEffect ，并在需要时将其作为onResize的参数传递。 只要您不改变该值，就应该没问题。