使用 reactjs 中的道具更改更新状态值 [英] Update state values with props change in reactjs

问题描述

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

I have a modal component that should be called when setState changes but for some reason it is not updating. In the first file Im setting the following in render.

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

在 Modal 组件 constructor() 中，我设置了以下内容.

Within the Modal component constructor() I am setting the following.

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 );

  }

问题在于，constructor() 仅在初始创建时被调用一次.我的印象是，当我更新状态以显示模态时，构造函数将再次被调用，但这并没有发生.

The problem is that the constructor() only gets called once on initial creation. I was under the impression that when I update the state to show the modal the constructor would be called again but this isn't happening.

我基本上想改变状态以显示模态，然后重新运行render().

I basically want to change the state to show the modal and then re-run render().

推荐答案

没有 constructor 在组件重新渲染时不会被调用，它只会在初始渲染时被调用.

No constructor will not get called when component re-rendered, it will get called only on initial rendering.

我认为，您可以通过两种方式解决问题:

I think, there are two ways by which you can solve your issue:

1. 使用 componentWillReceiveProps(){ 生命周期方法，只要 props 值发生任何变化，它就会被调用，因此您可以更新 Modal 组件 state 这里的值 showModal，像这样:

1. Use componentWillReceiveProps(){ lifecycle method it will get called whenever any change happens to props values, so you can update the Modal component state value showModal here, like this:

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

根据DOC:

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

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

2.不要将props值存储在state变量中，直接使用this.props.showModel> 在 Model 组件中，这样每当 props 值发生任何变化时，Modal 组件都会采用更新后的值.

2. Don't store the props value in state variable and directly use this.props.showModel in Model component, by this way whenever any change happens to props values, Modal component will take the updated values.

这篇关于使用 reactjs 中的道具更改更新状态值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！