我的所有者反应组件状态是否阻止我更新子组件状态？答案

【问题标题】：Is my owner react components state preventing me from updating child component state?我的所有者反应组件状态是否阻止我更新子组件状态？
【发布时间】：2016-08-19 14:47:57
【问题描述】：

我正在尝试更新通过 UI 上的按钮安装的模式中的复选框的状态。我在 AppWrapper 挂载时加载设置，以便我可以根据需要传递它们。现在我只是将设置作为道具传递给 SettingsList 组件，然后将一系列子节点呈现为复选框。当模式打开时，我可以单击复选框，并且设置成功保存到数据库中。但是，当模式关闭并重新打开时，设置会从所有者刷新到最初设置的状态。刷新页面虽然会显示正确选中的框。这对我来说很有意义，但我不确定他们是解决它的最佳方法。

我是否应该/我可以从子设置更新父级的状态，以便在重新打开模式时传递的道具反映用户更改？

我的反应结构是这样的：

<AppWrapper>
 getInitialState {settings:[]}
 <Modal>
  <SettingList settings={this.state.settings}>
   <Setting/>
  <SettingList/>
 <Modal/>
<AppWrapper/>

这不是直接的一对一代码，只是层次结构的一种表示。

我的 Modal 组件如下所示：

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

设置组件如下所示：

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

【问题讨论】：

您的代码有几个问题：例如defaultChecked 从未使用过，您还在渲染内部修改this（您可以使用本地变量），ReactCSSTransitionGroup 应该包装所有内容。但是您问题的核心是 this.state.settings 没有更新。您可以使用回调来通知父组件更新的设置或使用flux/redux/mobx 存储来维护状态。
我读过一些关于flux和redux的文章。我想在继续之前我会更多地研究 redux。感谢您的见解。
您介意再解释一下回调方法吗，或者链接到包含更多详细信息的文档？
这里有一篇解释8 different ways to communicate between components的综合文章，包括回调。
回调是这里的答案。感谢您的参考。

标签： javascript reactjs

【解决方案1】：

正如上面的 cmets 所指出的，有多种方法可以在组件之间传递数据。

http://andrewhfarmer.com/component-communication/

阅读有关回调的文章是我的解决方案。

【讨论】：