當父組件中發生事件時，如何從子組件更新父組件中的 state

Question

僅當父組件中發生單擊事件時，我才必須從子功能組件更新父組件 class 的 state。 現在我可以訪問從子組件到父組件的數據，但是當我更新 state 時出現錯誤，已達到最大深度。 所以我認為只有當特定事件發生在父組件中時，才從子組件更新父組件的 state 會更好，但我找不到任何方法。 你能展示一些光嗎？

Answer 1

根據您的描述，最好的辦法是將 state從孩子提升到父母，以便您當前僅在孩子中擁有的信息在父母中可用（可以將其作為道具提供給孩子）。 然后，孩子根本不參與其中，父母中的事件更新父母的 state，這是標准的。

但如果你絕對不能這樣做：

它讓你遠離人跡罕至的地方，但你可以：

1. 讓父母傳遞給孩子兩件事：
   1. 一種從父級訂閱事件的方法
   2. 一個 function 來更新父母的 state
2. 讓孩子訂閱事件
3. 讓父母在點擊發生時引發孩子訂閱的事件
4. 讓孩子通過從上面的 (1)(2) 中撥打 function 來響應該事件

雖然這可行，但有點令人費解。 因此，再次重申，如果可以避免，請將更新所需的 state 從子級移動到父級，並將整個更新保留在父級中。

Answer 2

最后我想出了一種方法來實現它。

第 1 步：使用 useState 掛鈎為在父 state 中發生的事件設置 boolean。

// Inside Parent component
const [eventInParent, setEventInParent] = React.useState(false);

第 2 步：將 eventInParent 作為 prop 傳遞給您的子組件

// 內部子組件

第 3 步：在 props 中接收子組件中的事件狀態（eventInParent），並將其用作 useEffect hook 中的依賴項

React.useEffect(() => {

 if(eventInParent) {
   
 }
 
}, [eventInParent]);

正如您所看到的，每次事件在父組件中命中時，eventInParent 值都會更改，這將觸發子組件中的 useEffect 掛鈎。