React setState和update（）addon

我是一個使用ReactJS的初學者，今天我遇到了一個我不知道如何解釋的情況。React setState和update（）addon

我在類似的情況的一個項目工作的描述如下：

 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); 
 
     } 
 
      
 
     
 
\t 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"> 
 
       \t <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（）？

感謝

來源

2017-05-24 Ruslan

您是否嘗試過'console.log'這個'update（...）'調用的結果？這與「有效的解決方案」相比如何？ –

除非您故意使用React v0.13.1，否則您應該更新（最新版本爲[v15.5.4]（https://cdnjs.com/libraries/react）），您可以通過更改版本號你的cdnjs url –

版本號在這種情況下，結果是一樣的 – Ruslan

似乎是什麼問題發送到更新：對工作液 - 只是一個領域，使用update（） - 整個狀態對象。

如果我將工作部分更改爲：

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

      this.setState(updatedState);

那麼我會收到同樣的問題。

來源

2017-05-25 08:24:32 Ruslan

React setState和update（）addon

回答

相關問題