状態は更新されましたが、反応がUIに反映されませんでした

Question

私はチェックボックスのリストを持っていますが、ユーザーのチェックまたはチェックを外すとオブジェクトの配列を更新できます。しかし、私は1つの問題がある、私は状態を更新しても、他の値は変わらないままです。

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

あなたは（defaultValue attrが唯一制御できない分野です）valueを設定し、この入力を制御するために、いくつかのchangeHandlerを定義する必要があります。

<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だけ浅い行いますので、ご注意くださいオブジェクトをマージし、状態オブジェクトを直接変更することは避ける必要があります。ネストされたオブジェクトや配列をコピーするために深い状態のコピーを実行する必要があります。上記の例のように構文を広げるが、一般的には、immutability-helperまたはImmutableを使用して、状態の更新を不変な方法で実行することをお勧めします。