[英]reactjs: how to update the child state when parent props are updated
我从子组件更新父组件,作为回报,我从父组件获取新的道具,然后我希望子 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(....)
</>
)
}
我可以将步骤放在父级中并作为道具传递。 但我想把逻辑放在一个地方
现在我可以这样做吗
在 useEffect() 中尝试setSteps()
useEffect()
。 它应该像 Class 组件的ComponentDidUpdate()
一样工作。 在useEffect
,我们应该发送参数以进行更改,我们的 state 应该得到更新。 因此,每当更新name
时,反射都会在 setSteps() 上。
useEffect(()=> setSteps(getSteps(name)), [name]);
要在更新道具时更新子组件,您必须使用 useEffect 挂钩。 您可以在 ChildComponent 中添加挂钩:
useEffect(() => {
setSteps(getSteps(name));
}, [name]);
您还应该将初始步骤设置为空数组,以避免重复调用 getSteps。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.