Question

我是使用ReactJS的初学者，今天我遇到了一个我不知道如何解释的情况。

我正在开展一个类似下面描述的项目的项目：

      var update = React.addons.update;

      
      class HelloWidget extends React.Component{
        constructor(props) {
          super(props);
           this.state = {
             group1: 'show',
             group2: 'A'
          };
          this.Update = this.Update.bind(this);
          this.handleChange1 = this.handleChange1.bind(this);
        }
        
        Update(e, value = ''){
          let field = e;

          if(!value) field = e.target.name

          //this solution work
          /*this.setState({
            [field]: value || e.target.value
          });*/

          
            
          //this solution doesn't work
          let theState = Object.assign({}, this.state),
              updatedState = update(theState,{[field]: {$set: value || e.target.value}})
          console.log("UPDATE RESULTS");console.log(updatedState);
          this.setState(updatedState);
        }
          
        
	handleChange1(e) {
          const filters = this.state
          if(filters.group1 === 'show' && filters.group2 === 'C' ){
            this.Update('group2', 'A');
          }
          this.Update(e);
        }

        render() { 
            const filters = this.state;
            console.log("RENDER");console.log(filters);
            return (
              <div className="widget">
              	<div>
                  Group 1<br />
                  <input type="radio" value="show" name="group1"  defaultChecked={filters.group1 === 'show'} onChange={this.handleChange1} /> Show All Group 2 
                  <input type="radio" value="hide" name="group1"  defaultChecked={filters.group1 === 'hide'} onChange={this.handleChange1} /> Hide 3rd option
                </div>
                <br /><br />
              
                <div>
                  Group 2<br />
                  <input type="radio" value="A" name="group2"  checked={filters.group2 === 'A'} onChange={this.Update} /> A
                  <input type="radio" value="B" name="group2"  checked={filters.group2 === 'B'} onChange={this.Update} /> B
                  {filters.group1 === 'show' && <label><input type="radio" value="C" name="group2"  checked={filters.group2 === 'C'} onChange={this.Update} /> C</label>}
                </div>
             </div>
           );
        }
      }

      ReactDOM.render(<HelloWidget />, document.getElementById('container'));

.widget {
    width: 402px;
    margin:10px auto;
    padding:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

很快，我有一个从不同子组件更新状态的函数。根据附带的源代码，更改第一个无线电组中的选项应显示或隐藏第二个无线电组的选项（最后一个）。如果选中隐藏选项，则应在隐藏后检查默认（第一个）选项。

当我直接使用setState（）时，一切正常，但由于状态对象的复杂性，我使用update() addon并且结果不一样 - 在隐藏最后一个后，不检查第二个无线电组的默认选项。

使用update（）的问题在哪里？

由于

Answer 1

似乎问题是发送更新的内容：对于工作解决方案 - 只使用一个字段，使用update（） - 整个状态对象。

如果我将工作部分更改为：

          let theState = Object.assign({}, this.state),
              updatedState = Object.assign({}, theState, {
                [field]: value || e.target.value
              })
          ;

          this.setState(updatedState);

然后我会收到同样的问题。

React setState和update（）addon

1 个答案: