reactjs：當父道具更新時如何更新子 state

Question

我從子組件更新父組件，作為回報，我從父組件獲取新的道具，然后我希望子 state 根據道具進行更新。

    export default function ParentCompnent(){
        [name,setName] = useState("test")

        function setNameMod(){
            setName(some random name)
        }
        render(
            <>
            <ChildComponent name=name setNameMod=setNameMod />
            </>
        )

    }


    function ChildComponent(props){
        {name,setNameMod} = props
        [steps,setSteps] = useState(getSteps(name))
        getSteps(name){
            .....
            return some_array
        }

        function refreshSteps(){
            setNameMod()

            setSteps(getSteps(name))
            // i am expecting new name from parent be used here
            // but it looks the old name is being used.
        }

        render(
            <>
            <button onclick={()=>refreshSteps()}>Refresh</button>
            steps.map(....)
            </>


            )
    }

我可以將步驟放在父級中並作為道具傳遞。 但我想把邏輯放在一個地方

現在我可以這樣做嗎

Answer 1

在 useEffect() 中嘗試setSteps() useEffect() 。 它應該像 Class 組件的ComponentDidUpdate()一樣工作。 在useEffect ，我們應該發送參數以進行更改，我們的 state 應該得到更新。 因此，每當更新name時，反射都會在 setSteps() 上。

useEffect(()=> setSteps(getSteps(name)), [name]);

Answer 2

要在更新道具時更新子組件，您必須使用 useEffect 掛鈎。 您可以在 ChildComponent 中添加掛鈎：

useEffect(() => {
   setSteps(getSteps(name));
}, [name]);

您還應該將初始步驟設置為空數組，以避免重復調用 getSteps。