javascript - 传递新 Prop 时 react 子组件状态不更新

Question

我正在渲染一个自定义模态组件，该组件根据从父组件传入的 Prop 显示。 isVisible 属性最初为 false，然后通过按钮在父组件中更新。我正在通过渲染函数中的 console.log 语句检查组件状态。当组件首次初始化时，它会按预期记录 false false，但当 isVisible 更新时，它会返回 false true。为什么状态不随 Prop 更新？

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 树中的组件运行一次，因此状态不会在传递的每个 props 上更新。

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

使用componentWillReceiveProps您可以在其中设置状态以反射(reflect)传入的新 Prop ，以便您获得所需的内容。