狀態已更新但反應未顯示反映在UI上

Question

我有一個複選框列表，我可以在用戶選中或取消選中時更新其對象數組。但是我有一個問題，即使我更新狀態，其他值也不會改變。

http://jsbin.com/qomekohile/1/edit?js,console,output

class HelloWorldComponent extends React.Component { 

    constructor(){ 
    super() 
    this.handleChange = this.handleChange.bind(this); 
    this.state = { 
     "fruits":[ 
     {"name":"banana","value":true}, 
     {"name":"watermelon","value":false}, 
     {"name":"lemon","value":true}, 
     {"name":"other","value":true,"other_value":"Durian"} 
     ] 
    } 
    } 

    handleChange(e,key){ 
    let nxState = Object.assign({}, this.state) 
    nxState.fruits.find(obj => { 



     if (obj.name === key) { 
     obj.value = e.target.checked 

     if(obj.name === 'other' && obj.value === false){ 
      obj.other_value = ''; //why this won't work 
     } 

     return true 
     } else { 
     return false 
     } 
    }); 
    this.setState(nxState) 
    } 

    render() { 
    return (
     <div> 
     {this.state.fruits.map(obj => 
      (obj.name === 'other') ? 

      <div> 
      <label>{obj.name}</label> 
      <input onChange={(e) => this.handleChange(e, obj.name)} type="checkbox" defaultChecked={obj.value} /> 
      <input type="text" defaultValue={obj.other_value} /> 
      </div> 
      : 
      <div key={obj.name}> 
      <label>{obj.name}</label> 
      <input onChange={(e) => this.handleChange(e, obj.name)} type="checkbox" defaultChecked={obj.value} /> 
      </div> 
     )} 
     <br /> 
     <pre>{JSON.stringify(this.state.fruits,null,2)}</pre> 
     </div> 
    ); 
    } 
} 

Answer 1

您應該設置value和定義一些changeHandler，使這個輸入控制（defaultValue attr爲唯一不受控制的領域）：

<input type="text" value={obj.other_value} onChange={(e) => this.handleOtherChange(e)}/> 

//example `other` text input change handler 
handleOtherChange(e){ 
    let nxState = {...this.state, fruits: [ 
     ...this.state.fruits, 
    ]}; 
    nxState.fruits.find(obj => obj.name === 'other').other_value = e.target.value; 
    this.setState(nxState) 
} 

也請注意，只有Object.assign執行淺合併對象，並且由於直接改變狀態對象應該被避免，所以你必須執行深度拷貝（複製嵌套對象和數組），這可以通過usi ng的語法如上例所示，但通常我會推薦使用immutability-helper或Immutable來執行狀態更新的不可變方式。