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 state。 setState将触发重新渲染。

重新渲染父组件

2 个答案: