なぜ私のチェックされた小道具が変わるのですか？

Question

私はReactのTODOリストを作成しようとしていますが、TodoItemのcheck属性を変更すると、の結果と逆の結果になります。defaultCheckedも役に立たない。

 var Todo = React.createClass({ 
     getInitialState(){ 
     return{i:0,data:[],allCompleted:false}; 
     }, 
     handleKeyPress(e){ 
     if(e.key === 'Enter' && e.currentTarget.value != ''){ 
      localStorage.setItem(uuid(e.currentTarget.value),JSON.stringify({uuid:uuid(e.currentTarget.value),checked:false,todoContent:e.currentTarget.value})); 
      this.state.data.push({uuid:uuid(e.currentTarget.value),checked:false,todoContent:e.currentTarget.value}); 
      this.setState({i: ++(this.state.i),data:this.state.data}, 
      ()=>{e.target.value = ''}); 

     } 
     }, 
     /* 
     *↓Here I made every item.checked = true when I click the all-completed checkbox; 
     */ 
     handleAllComplete(e){ 
     if(!this.state.allCompleted){ 
      this.state.allCompleted = true; 
      this.state.data.map((item)=>{item.checked?true:item.checked = !item.checked}); 
      return this.setState({data:this.state.data}); 
     } 
     this.state.allCompleted = false; 
     this.state.data.map((item)=>{item.checked = false}); 
     return this.setState({data:this.state.data}); 

     }, 
     handleOneComplete(todoUuid){ 
     console.log('one completed');  
     this.state.data.map((item)=>{item.uuid==todoUuid?(item.checked = !item.checked):undefined;}); 
     this.setState({data:this.state.data}); 
     }, 
     componentWillMount(){ 
     let data = []; 
     for(var i in localStorage){ 
      if(localStorage.hasOwnProperty(i)){ 
      data.push(JSON.parse(localStorage.getItem(i))); 
      } 
     } 
     this.setState({i:i,data:data}); 
     }, 
     render(){ 
     console.log(this.state.data); 
     return <div> 
      <AddTodoItem handleKeyPress={this.handleKeyPress} handleAllComplete={this.handleAllComplete}/> 
      <TodoItemContainer data={this.state.data} handleOneComplete={this.handleOneComplete}/> 
      <TodoToolBar /> 
     </div> 
     } 
    }); 

     var TodoItemContainer = React.createClass({ 
     render(){ 
     var todoItems = []; 
     for(let i of this.props.data){ 

      todoItems.push(<TodoItem key={i.uuid} uuid={i.uuid} checked={i.checked} content={i.todoContent} style={i.checked?{color:'red'}:undefined} handleOneComplete={this.props.handleOneComplete}/>); 
      console.log(i.checked,'in container'); 
      /* 
      *↑Here's I got the check attribute is true and it meets my expectations; 
      */ 
     } 
     if(todoItems.toString() == ''){ 
      return <div></div>; 
     } 

     return <div>{todoItems}</div>; 

     } 
    }) 

     var TodoItem = React.createClass({ 
     getInitialState(){ 
     return ({checked:this.props.checked,todoContent:this.props.content}); 
     }, 
     componentWillReceiveProps(){ 
     /* 
     *but Here, i got checked = false and that's my question; 
     */ 
     console.log(this.props.checked,'will receive'); 
     this.setState({checked:this.props.checked,todoContent:this.props.content}); 
     }, 
     render(){ 
     console.log(this.state.checked,'render item'); 
     return <div> 
      <input type="checkbox" defaultChecked={this.state.checked} onChange={this.props.handleOneComplete.bind(null,this.props.uuid)}/> 
      <lable style={this.props.style}>{this.state.todoContent}</lable> 
      <button>delete</button> 
     </div> 
     }, 
    }); 

Simplelyが言えば、私はすべてのTodoItem checked = trueを設定しますが、TodoItem以内に、私はthis.props.checkedだがここでfalse

https://jsfiddle.net/20xads1n/1/

Answer 1

であるあなたの例 https://jsfiddle.net/7s99f2aj/の固定バージョンがあります。また

私はあなたがsetStateを使用することをお勧めしたいと思います（私はあなたのTodoItemコンポーネントにcheckedにdefaultCheckedを変更）） 2をhttps://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceivepropsを参照してくださいあなたはcomponentWillReceiveProps方法でnextProps引数を逃した

1）： 2つの問題がありましたどこでもあなたの状態を変えるとき（すなわちthis.state.allCompleted = true;の代わりにthis.setState({allCompleted: true})）、mapの中の直接的に状態を突き抜けさせないでください：this.state.data.map((item)=>{item.checked?true:item.checked = !item.checked});。代わりに、完全に新しいdataオブジェクトを作成し、setStateを使用して状態を変更することを検討してください。