为什么在下面的伪代码示例中，当容器更改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仍然显示旧值。
当前回答
你可以使用componentWillReceiveProps:
componentWillReceiveProps({bar}) {
this.setState({...this.state, bar})
}
这要归功于Josh Lunsford
其他回答
我的案例涉及在props对象上有多个属性，并且需要在更改其中任何一个时重新渲染Child。 上面提供的解决方案是有效的，但为每个方案添加一个密钥变得乏味和肮脏(想象一下有15个……)如果有人面临这个问题，你可能会发现stringify props对象很有用:
<Child
key={JSON.stringify(props)}
/>
这样，对props上的每个属性的每次更改都会触发Child组件的重新呈现。
希望这能帮到别人。
更新子进程以使属性'key'与名称相等。每次键改变时，组件都会重新呈现。
Child {
render() {
return <div key={this.props.bar}>{this.props.bar}</div>
}
}
你应该使用setState函数。如果不是，无论如何使用forceUpdate, state都不会保存您的更改。
Container {
handleEvent= () => { // use arrow function
//this.props.foo.bar = 123
//You should use setState to set value like this:
this.setState({foo: {bar: 123}});
};
render() {
return <Child bar={this.state.foo.bar} />
}
Child {
render() {
return <div>{this.props.bar}</div>
}
}
}
你的代码似乎无效。我不能测试这段代码。
如果Child不维护任何状态，而只是呈现道具，然后从父组件调用它，那么您可能应该将它作为功能组件。除此之外，您还可以使用与功能组件(useState)的挂钩，这将导致无状态组件重新呈现。
此外，您不应该更改propas，因为它们是不可变的。维护组件的状态。
Child = ({bar}) => (bar);
你可以使用componentWillReceiveProps:
componentWillReceiveProps({bar}) {
this.setState({...this.state, bar})
}
这要归功于Josh Lunsford
