React：在子組件中更改了 state。 如何查看父組件的變化？

Question

對於我正在使用的網站，我制作了一個帶有復選框的組件，該復選框會觸發父組件中的 state 更改。 我已通過子組件在控制台中檢查 state 已更改，但我希望父組件也“注意到”更改。 我已經嘗試過 useEffect 和 componentDidUpdate 但它們都不會被 state 更改觸發。

澄清一下，結構如下所示：

Parent：擁有初始的 state Child：通過 parent 獲取到 state，並更改為 state

在頁面刷新時，父級注意到 state 更改，但我希望無需刷新頁面即可完成此更改。

我希望這是有道理的，提前謝謝你:)

Answer 1

這是你想要的？

import React, { useState } from "react";

const Parent = () => {
  const [someState, setSomeState] = useState("Initial Some State");

  const onChangeSomeState = (newSomeState) => {
    setSomeState(newSomeState);
  };

  return (
    <div>
      Parent:
      <Child
        someState={someState}
        onChangeSomeState={onChangeSomeState}
      ></Child>
    </div>
  );
};

const Child = ({ someState, onChangeSomeState }) => {
  const handleChangeStateClick = () => {
    onChangeSomeState("New Some State from Child");
  };
  return (
    <div>
      Child:{someState}
      <input
        type="button"
        onClick={handleChangeStateClick}
        value="Change state from Child"
      ></input>
    </div>
  );
};

export default Parent;

Answer 2

如果我對你的問題的理解正確，你可以將回調 function 傳遞給子組件。 這樣，您將從父組件中的回調接收值，如下所示：

const ParentComponent = () => {
    const [someState, setSomeState] = useState()

    const childCallback = (value) => {
       setSomeState(value)
    }

    return <ChildComponent callback={childCallback} />
}

Answer 3

React 的本質意味着數據沿着 dom 樹向下流動。 使用道具可以做到這一點。

當道具發生變化時，反應會注意到它，這會導致道具的接收者重新渲染。 但是，正如您所發現的那樣，這是一種單向關系，永遠只能是父子關系。

javascript 的美妙之處在於您可以像對待字符串或數字一樣對待函數並傳遞它們。 在這種情況下作為道具。

因此，雖然孩子不能直接“告訴”父母發生了一些變化，但父母可以傳入一個 function，孩子可以使用它來告知變化。

這種從父母和孩子可以用來通知父母的“處理程序” function 傳遞值的模式非常普遍，並且是一個很好的模式。

以標准文本輸入為例。

const Parent = () => {
  // This is our parent's state
  const [inputValue, setInputValue] = useState('hello world');

  // This is the handler we will give to the child to let us know of changes
  const handleInputChange = (e) => setInputValue(e.target.value) 

  return <input
    value={inputValue}
    onChange={handleInputChange} 
  />
}

在上面的示例中，子項（輸入）在更改時將調用提供給它的 function，這將更新父項的 state。反應組件上的任何 state 更新（就像道具更改一樣）將導致重新渲染，因此視覺更新。

我在你自己編寫的任何孩子中使用了一個內置的<input> ，當你想讓父母知道發生了什么事時，你只需要接受一個你在孩子內部調用的“處理函數”。

Answer 4

據我了解，如果我沒弄錯的話，我認為你應該將觸發事件作為道具從父母傳遞給孩子。

父級（功能組件+鈎子）：

const [ userName, setUserName ] = useState("");

return(
  <Child doChangeProps={setUserName} />
)

孩子（功能組件+鈎子）：

const { doChangeProps } = props;

return(
  <input onChange={ e => { doChangeProps(e); } } />
)

或者，您可以使用上下文來實現更簡單的數據流。

Answer 5

function ParentComponent(){
    const [state, setState] = useState()

    useEffect(() => {
       console.log({ state });
    },[state])

    return <ChildComponent state={state} setState={setState} />
}