为什么在下面的伪代码示例中,当容器更改foo.bar时,子不重新呈现?
Container {
handleEvent() {
this.props.foo.bar = 123
},
render() {
return <Child bar={this.props.foo.bar} />
}
Child {
render() {
return <div>{this.props.bar}</div>
}
}
即使我在修改Container中的值后调用forceUpdate(), Child仍然显示旧值。
你必须使用动态组件。
在这个代码片段中,我们多次渲染子组件并传递key。
如果我们动态渲染一个组件多次,那么React不会渲染该组件,直到它的键被更改。
如果我们使用setState方法更改检查。它不会反映在子组件中,直到我们改变它的键。我们必须在child的状态上保存它然后相应地将它改为渲染child。
类父扩展组件{
状态= {
检查:真
}
呈现(){
回报(
< div className =“父”>
{
[1,2,3].map(
N => <div key={N}>
<孩子完成= {this.state。检查}/ >
< / div >
)
}
< / div >
);
}
}
你必须使用动态组件。
在这个代码片段中,我们多次渲染子组件并传递key。
如果我们动态渲染一个组件多次,那么React不会渲染该组件,直到它的键被更改。
如果我们使用setState方法更改检查。它不会反映在子组件中,直到我们改变它的键。我们必须在child的状态上保存它然后相应地将它改为渲染child。
类父扩展组件{
状态= {
检查:真
}
呈现(){
回报(
< div className =“父”>
{
[1,2,3].map(
N => <div key={N}>
<孩子完成= {this.state。检查}/ >
< / div >
)
}
< / div >
);
}
}
我也有同样的问题。
这是我的解决方案,我不确定这是一个好的实践,如果不是告诉我:
state = {
value: this.props.value
};
componentDidUpdate(prevProps) {
if(prevProps.value !== this.props.value) {
this.setState({value: this.props.value});
}
}
UPD:现在你可以用React Hooks做同样的事情:
(仅当component是函数时)
const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);