当传递新道具时反应子组件状态不更新

Question

我正在渲染基于从父组件传入的道具显示的自定义模态组件。道具isVisible最初是false，然后通过按钮在父组件中更新。我在渲染函数中通过console.log语句检查组件状态。当组件初次初始化时，它按预期记录​​，但isVisible更新后，它将返回false true。为什么国家不更新道具？

class MyModal extends React.Component { 
    constructor(props) { 
    super(props); 
     this.state = { 
     createModalVisible:props.isVisible, 
     }; 

    setCreateModalVisible = (visible) => { 
    this.setState({createModalVisible:visible}); 
    } 

    componentWillMount(){ 
    this.setCreateModalVisible(this.props.isVisible); 
    } 

    } 
    render() { 
    console.log(this.state.createModalVisible,this.props.isVisible); 

    return (//modal stuff) 
    } 
} 
export default MyModal 

我拿到这可能是非常基本的组件生命周期的东西，但我无法从文档弄清楚并是相当新的反应。

Answer 1

由于constructor和componentWillMount仅对挂载到DOM树中的每个组件运行一次，所以在传递的每个道具上状态都不会更新。

this.state对于每个组件实例是本地的，需要更新为this.setState()以便能够在每个渲染通道上使用更新的状态对象。

使用 componentWillReceiveProps您可以在其中设置状态以反映传递给您的新的道具以获得您需要的东西。