Rerender父组件

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

这些是孩子们

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

在Main-component的函数"addMessage()“中，我记录了我的数组messageStorage的内容，看起来是正确的。但它永远不会在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()代替push into状态。setState将触发重新渲染。