Question

我从子组件更新父组件，作为回报，我从父组件获取新的道具，然后我希望子状态根据道具更新。

    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

在 setSteps() 中尝试 useEffect()。对于类组件，它应该像 ComponentDidUpdate() 一样工作。在 useEffect 中，我们应该发送参数以更改我们的状态应该更新。因此，每当 name 更新时，反射都会在 setSteps() 上。

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

Answer 2

要在 props 更新时更新子组件，您必须使用 useEffect 钩子。您可以在 ChildComponent 中添加钩子：

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

您还应该将初始步骤设置为空数组，以避免重复调用 getSteps。

reactjs：当父道具更新时如何更新子状态

2 个答案: