Warum reagiert Reacts meine geprüften Requisiten?

Question

Ich versuche, eine TODO-Liste mit React zu schreiben, aber wenn ich ein check Attribut von TodoItem ändern, habe ich ein gegenteiliges Ergebnis erhalten.defaultChecked ist auch nutzlos.

 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 sprechen, habe ich jeden TodoItem checked = true, aber innerhalb TodoItem bekam ich this.props.checked ist false

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

Answer 1

Hier feste Version Ihres Beispiel https://jsfiddle.net/7s99f2aj/. Es gab 2 Probleme:

1) Sie nextProps Argument in componentWillReceiveProps Methode verfehlt (siehe https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops) 2) Ich änderte defaultChecked-checked in Ihrer TodoItem Komponente

Auch würde Ich mag Ihnen empfehlen setState zu verwenden überall, wenn Sie Ihren Zustand ändern (dh this.setState({allCompleted: true}) anstelle von this.state.allCompleted = true;) und nicht mutieren Zustand direkt innerhalb map Funktionen wie folgt: this.state.data.map((item)=>{item.checked?true:item.checked = !item.checked});. Erwägen Sie stattdessen, das Objekt data komplett neu zu erstellen und den Status mit setState zu ändern.