在 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的參數傳遞。 只要您不改變該值，就應該沒問題。