我的所有者是否反应组件状态阻止我更新子组件状态？(Is my owner react components state preventing me from updating child component state?)

 我正在尝试更新通过UI上的按钮挂载的模式中的复选框的状态。 当AppWrapper安装时我正在加载设置，所以我可以根据需要传递它们。 现在我只是将设置作为道具传递给SettingsList组件，然后将一系列子节点呈现为复选框。 当模态打开时，我可以单击复选框，并且设置成功保存到数据库。 但是，当关闭模式并重新打开时，设置将从所有者刷新到初始设置状态。 刷新页面虽然显示准确选中的框。 这对我来说很有意义，但我不确定他们是解决问题的最佳方法。 
 
 我是否可以从子设置更新父级的状态，因此当重新打开模式时，传递的props会反映用户的更改？ 
 
 我的反应结构如下： 
 
<AppWrapper>
 getInitialState {settings:[]}
 <Modal>
  <SettingList settings={this.state.settings}>
   <Setting/>
  <SettingList/>
 <Modal/>
<AppWrapper/>
 
 它不是一对一的直接代码，只是层次结构的一种表示。 
 
 我的模态组件如下所示： 
 
var Modal = React.createClass({

  render: function() {
    if(this.props.isOpen){
      return (
        <ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionEnterTimeout={500} transitionLeaveTimeout={500}>

        <div className="mymodal">
        {this.props.children}
        </div>
        </ReactCSSTransitionGroup>
      );
    } else {
      return <ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionName={this.props.transitionName} transitionEnterTimeout={500} transitionLeaveTimeout={500} />;
    }
  }
});
 
 我的SettingList组件如下所示： 
 
var SettingsList = React.createClass({

  render: function() {

    var settingNodes = this.props.settings.map(function(setting, i){

      return (
        <Setting data={setting}
                  key={i}>
        </Setting>
      )
    }.bind(this));

    return (
      <div className="settings-block">
          <h2>Notifications</h2>
          <ul className="account-settings">
            {settingNodes}
          </ul>
      </div>
    )
  }
});
 
 而Setting组件如下所示： 
 
var Setting = React.createClass({

  saveSetting: function(one) {

    core.setAccountSettings(this.refs.setting_checkbox.id, this.refs.setting_checkbox.checked).done(function(response){

      this.setState({
        defaultChecked:  this.refs.setting_checkbox.checked
      };

      console.log(response)
    }.bind(this));

  },

  render: function() {

    //get values from settings object
    for (var k in this.props.data) {
      this.settingId = k
      this.settingName = String(k.split(/_(.+)?/)[1]).replace(/_/g, " ");
      this.settingValue = (this.props.data[k].toLowerCase() == "true")
    }

    return (
      <li className="checkbox">
      <input onChange={this.saveSetting} ref="setting_checkbox" id={this.settingId} className="settings_checkbox" type="checkbox" defaultChecked={this.settingValue}></input>
      <label htmlFor={this.settingName}>{this.settingName}</label>
      </li>
    )
  }
});

I'm trying to update the state of a checkbox within a modal that is mounted via button on the UI. I'm loading the settings when AppWrapper mounts so I can pass them around as needed. Right now i'm just passing the settings as props to SettingsList component, which then renders a series of child nodes as checkboxes. I'm able to click the checkboxes when the modal is open, and the settings successfully save to the database. However when the modal is closed and reopened the settings are refreshed to the initially set state from the owner. Refreshing the page though shows the accurately checked boxes. That makes sense to me, but i'm unsure they best way to resolve it.
 
Should I/Can I update the state of the parent from the child setting so when the modal is reopened that passed props reflect the user changes?
 
My react structure looks like this:
 
<AppWrapper>
 getInitialState {settings:[]}
 <Modal>
  <SettingList settings={this.state.settings}>
   <Setting/>
  <SettingList/>
 <Modal/>
<AppWrapper/>
 
It's not direct one to one code, bust just a representation of the hierarchy.
 
My Modal component looks like this: 
 
var Modal = React.createClass({

  render: function() {
    if(this.props.isOpen){
      return (
        <ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionEnterTimeout={500} transitionLeaveTimeout={500}>

        <div className="mymodal">
        {this.props.children}
        </div>
        </ReactCSSTransitionGroup>
      );
    } else {
      return <ReactCSSTransitionGroup transitionName={this.props.transitionName} transitionName={this.props.transitionName} transitionEnterTimeout={500} transitionLeaveTimeout={500} />;
    }
  }
});
 
My SettingList component looks like this:
 
var SettingsList = React.createClass({

  render: function() {

    var settingNodes = this.props.settings.map(function(setting, i){

      return (
        <Setting data={setting}
                  key={i}>
        </Setting>
      )
    }.bind(this));

    return (
      <div className="settings-block">
          <h2>Notifications</h2>
          <ul className="account-settings">
            {settingNodes}
          </ul>
      </div>
    )
  }
});
 
And the Setting component looks like this:
 
var Setting = React.createClass({

  saveSetting: function(one) {

    core.setAccountSettings(this.refs.setting_checkbox.id, this.refs.setting_checkbox.checked).done(function(response){

      this.setState({
        defaultChecked:  this.refs.setting_checkbox.checked
      };

      console.log(response)
    }.bind(this));

  },

  render: function() {

    //get values from settings object
    for (var k in this.props.data) {
      this.settingId = k
      this.settingName = String(k.split(/_(.+)?/)[1]).replace(/_/g, " ");
      this.settingValue = (this.props.data[k].toLowerCase() == "true")
    }

    return (
      <li className="checkbox">
      <input onChange={this.saveSetting} ref="setting_checkbox" id={this.settingId} className="settings_checkbox" type="checkbox" defaultChecked={this.settingValue}></input>
      <label htmlFor={this.settingName}>{this.settingName}</label>
      </li>
    )
  }
});

原文：https://stackoverflow.com/questions/39041958