使用props更新状态值reactjs

Question

我有一个模态组件，应该在setState更改时调用，但由于某种原因它不会更新。在第一个文件中，我在渲染中设置以下内容。

<ModalParcel showModal={this.state.showModal} parcelToConfirm={this.state.dataForParcelToConfirm} />

在Modal组件构造函数（）中，我设置了以下内容。

constructor(props) {
    super(props);

    console.log("Constructor for modal componenet called.")

    //this.renderRowForMain = this.renderRowForMain.bind(this);

    this.state = {
      show: this.props.showModal
    };

  }

render() {

    if(this.state.show == true){

        var content = 
        <View style={styles.modal}>
            <View style={styles.modalContent}>
                <TouchableHighlight onPress={() => this.closeModal()}>
                    <Text>Close</Text>
                </TouchableHighlight>
            </View>
        </View>;

    }else {

        var content = null;

    }

    return ( content );

  }

问题是构造函数（）只在初始创建时被调用一次。我的印象是，当我更新状态以显示模态时，构造函数将再次被调用，但这不会发生。

我基本上想要更改状态以显示模态，然后重新运行render（）。

Answer 1

组件重新渲染时不会调用constructor，只有在初始渲染时才会调用它。

我认为，有两种方法可以解决您的问题：

1。使用componentWillReceiveProps(){生命周期方法，只要道具值发生任何变化，就会调用它，因此您可以在此更新模态组件state值showModal，就像这样：

componentWillReceiveProps(nextProp){
   this.setState({
      show: nextProps.showModal
   });
}

根据：

  

在安装的组件之前调用componentWillReceiveProps（）   收到新的道具。如果您需要更新状态以响应   prop更改（例如，重置它），您可以比较this.props   和nextProps并使用this.setState（）执行状态转换   这种方法。

2。不要将props值存储在state变量中，并在模型组件中直接使用this.props.showModel，这样每当发生任何更改时道具值，模态组件将采用更新的值。