チェックボックスにバインドし、チェック状態のベースを更新する

Question

チェックボックスをオンにすると、未定義が表示されます。それは私がfindを正しく使用したと思うのは奇妙です。それとももっと良い方法がありますか？

http://jsbin.com/ficijuwexa/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}, 
     ] 
    } 
    } 

    handleChange(e,key){ 
     console.log(key) 

    console.log(e.target.checked) 

const newFruitsData = this.state.fruits.find(obj => { 
    obj.name === key ? obj.value = e.target.checked : '' 

}); 
console.log(newFruitsData) //why this is undefined?! 

    } 

    render() { 
    return (
     <div> 
     {this.state.fruits.map(obj => 
      <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

それはhandleChange（ブール

const newFruitsData = this.state.fruits.find(obj => obj.name === key && obj.value === e.target.checked); 

Answer 2

を返す必要がありますしながら、あなたの検索は、ノーリターン文は、それが常にundefinedを返すしていない）、Array.prototype.findが返すブール：

handleChange(e,key){ 
    let nxState = Object.assign({}, this.state) 
    nxState.fruits.find(obj => { 
     if (obj.name === key) { 
     obj.value = e.target.checked 
     return true 
     } else { 
     return false 
     } 
    }); 
    this.setState(nxState) 
} 

setState()の代わりに、それはもちろん

の私の意見だ---更新

Check it