javascript - 在 React 中更新数组

Question

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

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

onKeyPress of an input, I have a function that pushes to messages array.

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

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

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

Answer 1

您需要在组件状态中设置消息。

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

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

this.setState({messages: updatedMessages})

然后映射消息状态，或 render 中的 messages 变量:

const messages = this.state.messages;


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