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

Question

我正在呈现一个自定义模态组件，该组件基于从父组件传入的道具来显示。道具isvisible最初为false，然后通过按钮在父组件中更新。我正在通过render函数中的console.log语句检查组件状态。当组件首次初始化时，它会像预期的那样记录false false，但当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

由于构造函数和componentWillmount只在每个挂载到DOM树中的组件上运行一次，因此不会在每个被传递的道具上更新状态。

this.state对于每个组件实例都是本地的，需要使用this.setstate()进行更新，以便能够在每次呈现传递时使用更新后的状态对象。

使用componentWillReceiveProps，您可以在其中设置状态以反映传递给您的新道具，从而获得您需要的内容。