通过新道具时，反应子组件状态不会更新

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

我知道这可能是相当基本的组件生命周期的东西，但是我无法从文档中弄清楚它，而且对React来说还很新。

Answer 1

由于constructor和componentWillMount对于安装到DOM树中的每个组件仅运行一次，因此不会在传递的每个prop上更新状态。

this.state对于每个组件实例都是本地的，需要使用this.setState()进行更新，以便能够在每个渲染过程中使用更新的状态对象。

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