再販者の親コンポーネント

Question

私は外出先で物事を追加する機能を備えたシンプルなリストを表示しようとしています。そして、私は遠いので "うまくいきました"が、UIは正しくレンダリングされません。

これは私の親

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> 
     ) 
    } 
    }); 

であり、これらは私の配列messageStorageの内容をログに記録する機能でチャイルズ

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> 
      ) 
     } 

主な成分イムで「そしてaddMessage（）」であり、それ正しいと思われる。しかし、UIでレンダリングされることはありません。どうしてこれなの？

Answer 1

状態の変更が正しくありません - 最新の状態値を反映するには、常にthis.setStateを呼び出す必要があります。これに上記

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

変更 -

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

Answer 2

利用SETSTATE（）の代わりに状態に押し込みます。 setStateは再レンダリングをトリガーします。