Question

我来自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>

更新我有以下（但没有运气）一些说明。我正在使用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>
    );
  }
}

Answer 1

您需要在组件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...

Answer 2

两个问题：

您不直接在React中改变状态对象。相反，通过setState提供 new 数组，其中包含新条目。
根据现有状态更新状态时，必须使用setState的函数回调版本，而不是接受对象的版本，因为状态更新是异步的，可以合并。使用对象版本经常会起作用，但不能保证;事实上，在某些时候它保证不。

React文档中的更多内容：Using State Correctly（“不要直接修改状态”和“状态更新可能是异步”部分）。

所以，在你的事件处理程序中：

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

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

Answer 3

将messages数组和设置状态更改设置为呈现DOM。您应该阅读https://facebook.github.io/react/docs/component-specs.html

在React中更新数组

3 个答案: