为什么在下面的伪代码示例中，当容器更改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 > ）; ｝ ｝
其他回答
确认，添加一个密钥工作。我看了所有的文件想弄清楚原因。
React希望在创建子组件时高效。如果新组件与另一个子组件相同，它就不会呈现新组件，这使得页面加载更快。
添加Key会迫使React呈现新组件，从而重置新组件的状态。
https://reactjs.org/docs/reconciliation.html#recursing-on-children
如果Child不维护任何状态，而只是呈现道具，然后从父组件调用它，那么您可能应该将它作为功能组件。除此之外，您还可以使用与功能组件(useState)的挂钩，这将导致无状态组件重新呈现。
此外，您不应该更改propas，因为它们是不可变的。维护组件的状态。
Child = ({bar}) => (bar);
在子组件connect方法的mapStateToProps中定义更改的道具。
function mapStateToProps(state) {
return {
chanelList: state.messaging.chanelList,
};
}
export default connect(mapStateToProps)(ChannelItem);
在我的例子中，channelList的通道被更新了，所以我在mapStateToProps中添加了chanelList
当从函数和useState创建React组件时。
const [drawerState, setDrawerState] = useState(false);
const toggleDrawer = () => {
// attempting to trigger re-render
setDrawerState(!drawerState);
};
这行不通
<Drawer
drawerState={drawerState}
toggleDrawer={toggleDrawer}
/>
这是可行的(添加键)
<Drawer
drawerState={drawerState}
key={drawerState}
toggleDrawer={toggleDrawer}
/>
你可以使用componentWillReceiveProps:
componentWillReceiveProps({bar}) {
this.setState({...this.state, bar})
}
这要归功于Josh Lunsford
