상태가 업데이트되었지만 반응이 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 수행에만 얕은 유의하시기 바랍니다 객체의 병합 이후 상태 객체를 직접 변경하면 피할 수 있어야합니다. 중첩 된 객체와 배열을 복사하기 위해 깊은 상태 복사를 수행해야합니다. 위 예제처럼 구문을 전파했지만 일반적으로 immutability-helper 또는 Immutable을 사용하여 상태 업데이트를 변경할 수 없도록하는 것이 좋습니다.