Question

我正在渲染一个基于从父组件传入的props显示的自定义模态组件。道具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树中的每个组件运行一次，因此状态不会在每个传递的道具上更新。

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

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

传递新道具时，React子组件状态不会更新

1 个答案: