状态已更新但反应未显示反映在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来执行状态更新的不可变方式。