时间戳

首页 > 解决方案 > 在孩子的 useEffect 中访问 EventListener 调用的函数内的父状态

reactjs - 在孩子的 useEffect 中访问 EventListener 调用的函数内的父状态

问题描述

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

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()，但这似乎不是很好，因为这样我的事件侦听器将被销毁并非常频繁地重新创建。

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

标签： reactjs

解决方案

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

推荐阅读