Javascript 在React中更新数组

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

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

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

更新 我有以下几点，但运气不佳，还有一些笔记。我正在使用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>
    );
  }
}

---

放置消息数组并将状态更改设置为呈现DOM。您应该阅读

您需要将消息设置为组件状态

然后在函数中设置状态：

this.setState({messages: updatedMessages})

然后映射到messages状态或render中的messages变量：

两个问题：

您不会在React中直接改变state对象。相反，通过setState提供一个包含新条目的新数组。 基于现有状态更新状态时，必须使用setState的函数回调版本，而不是接受对象的版本，因为状态更新是异步的，可能会合并。使用对象版本通常是可行的，但不能保证有效；事实上，在某种程度上，它保证不会。 React文档中有更多内容：不要直接修改状态，状态更新可能是异步部分

因此，在事件处理程序中：

.on('child_added', (dataSnapshot) => {
    this.setState(state => ({
      messages: [...state.messages, dataSnapshot.val()]
    }));
    //console.log(dataSnapshot.val());
});

我们需要对象初始值设定项周围的{似乎启动了一个完整的函数体，而不是一个简洁的表达式体。

setState调用对于OP的场景是不安全的，因为它们正在根据添加到状态消息数组中的现有状态更新状态。当根据现有状态更新状态时，必须使用setState的回调形式，因为状态更新是异步的可以合并。详细信息：仅供参考，您的错误。

this.setState({messages: updatedMessages})

const messages = this.state.messages;


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

.on('child_added', (dataSnapshot) => {
    this.setState(state => ({
      messages: [...state.messages, dataSnapshot.val()]
    }));
    //console.log(dataSnapshot.val());
});