在 React 中更新数组

我来自 Angular 1.x，希望使用 React / Redux 更新无序列表。

在 console.log 中，我看到数组正在更新，但它似乎没有绑定到 DOM。我有以下内容——

在输入的 onKeyPress 上，我有一个推送到消息数组的函数。

<ul className="list-inline">
  {messages.map(function(message, key){
    return (
      <li key={key} message={message}>{message}</li>
    );
  })}
</ul>

Update我有以下（但还没有运气）一些笔记。我正在使用 Firebase 侦听事件并添加到数组中。想知道这是否是一个绑定问题？ --

class Comments extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {messages: this.props.messages};
  }

  componentDidMount() {
    const path = '/comments/all';
    // Firebase watches for new comments
    firebase
      .database()
      .ref(path)
      .on('child_added', (dataSnapshot) => {
          this.state.messages.push(dataSnapshot.val());
          this.setState({
            messages: this.state.messages
          });
          //console.log(dataSnapshot.val());
      });
  }

  render() {
    const messages = this.state.messages;
    return (
      <ul className="list-inline">
        {messages.map(function(message, key){
          <li key={key}>{message}</li>
        })}
      </ul>
    );
  }
}

您需要在组件中设置消息state.

getInitialState() {
  return {
    messages: []
  }
}

然后在您的函数中设置状态：

this.setState({messages: updatedMessages})

然后映射消息状态，或者messages变量在render:

const messages = this.state.messages;


<ul className="list-inline">
  {messages.map(function(message, key){
etc...