Rerender Elternkomponente

Question

Ich versuche, eine einfache Liste mit der Fähigkeit zu sehen, Dinge unterwegs hinzuzufügen. Und ich bin soweit gekommen, dass es "funktioniert", aber die Benutzeroberfläche wird nicht richtig gerendert.

Dies ist meine Mutter

var Main = React.createClass({ 
    getInitialState: function() { 
     return { 
     messageStorage: this.getMessages() 
     } 
    }, 
    getMessages: function() { 
     return ['Banana', 'Orange']; 
    }, 
    addMessage: function(val) { 
     this.state.messageStorage.push(val); 
     console.log(this.state.messageStorage); 
     //this.render(); 
    }, 
    render: function() { 
     return (
      <div> 
      <InputField add={this.addMessage} /> 
      <MessageField value={this.state.messageStorage} /> 
      </div> 
     ) 
    } 
    }); 

Und das sind die Childs

var InputField = React.createClass({ 
     getInitialState: function() { 
      return { 
       textValue: '' 
      } 
     }, 
     changeInputValue: function(e) { 
      this.setState({textValue: e.currentTarget.value}); 
     }, 
     addMsg: function(e) { 
      this.props.add(this.state.textValue); 
      this.setState({textValue: ''}); 
      this.refs.msgInput.focus(); 
     }, 
     render: function() { 
      return (
       <div> 
       <input type='text' value={this.state.textValue} onChange={this.changeInputValue} ref='msgInput' /> 
       <input type='button' value='Save' onClick={this.addMsg} /> 
       </div> 
      ) 
     } 
     }); 

     var MessageField = React.createClass({ 
     eachMessage: function() { 
      var msg = this.props.value.map(function(item, index) { 
      return <Message value={item} key={index} /> 
      }); 
      return msg; 
     }, 
     render: function() { 
      return (
       <div> 
       {this.eachMessage()} 
       </div> 
      ) 
     } 
     }); 

     var Message = React.createClass({ 
     render: function() { 
      return (
      <div> 
       {this.props.value} 
      </div> 
      ) 
     } 

In der Funktion "addMessage()" in der Main-Komponente Im den Inhalt meiner Array Anmeldung messageStorage und es scheint richtig zu sein. Aber es wird nie in der Benutzeroberfläche gerendert. Warum ist das?

Answer 1

Ihre Statusänderungen sind nicht korrekt - Sie sollten immer this.setState aufrufen, um die neuesten Statuswerte anzuzeigen.

addMessage: function(val) { 
    this.state.messageStorage.push(val); 
    console.log(this.state.messageStorage); 
    //this.render(); 
}, 

ändern oben auf dieser -

addMessage: function(val) { 
    var messageStore = this.state.messageStorage; 
     messageStore.push(val); 
    this.setState({messageStorage:messageStore}); 
    console.log(this.state.messageStorage); 
    //this.render(); 
}, 

Answer 2

Verwenden setState() statt schieben in den Zustand. setState löst das erneute Rendern aus.