Question

我正在使用React和Firebase的实时数据库创建一个Web应用程序。功能很简单，我从Firebase获取多个对象并迭代这些对象并呈现值列表。

当我从Firebase控制台更新数据库时出现问题。当我这样做时，状态发生变化，列表会重新呈现，但它会一次又一次地复制列表。我不知道我是在制作什么东西或者我的方法是不正确的，但我想渲染一个包含来自对象的信息的列表，当数据库更新时，列表会更新（更改数据或删除entrys）。 / p>

以下是一些摘录和屏幕截图。

我获取对象并将它们保存到一个对象中并获取salt / id以供稍后迭代。

const rootRef = firebase
  .database()
  .ref()
  .child('orders');

rootRef.on('value', snap => {
  this.setState({ allOrders: snap.val() }); //Save the objects in a state objectTaker
  //Iterate through the object and save the salt/id
  const p = snap.val();
  for (var key in p) {
    if (p.hasOwnProperty(key)) {
      this.setState(prevState => ({
        saltsOrders: [...prevState.saltsOrders, key]
      }));
    }
  }
});

在这里，我迭代id数组并调用数据的对象：

renderOrders = () => {
 return (
  <ul className="collection" id="listOrders">
    {this.state.saltsOrders.map(num => {
      return (
        <li
          className="collection-item"
          onClick={() =>
            this.setState({
              objectOrder: this.state.allOrders[num],
              showOrder: true
            })
          }
        >
          {this.state.allOrders[num].signedOrder.salt}
        </li>
      );
    })}
  </ul>
 );
};

在render（）中，我只需要调用renderOrders：

{this.renderOrders()}

以下是我在Firebase实时数据库中更改内容之前和之后的屏幕截图。 Before After

Answer 1

您可以使用Object.keys直接迭代对象，例如：

Object.keys(allOrders).map(key => <div>Salt key: {key}, value: {allOrders[key]}</div>)

这样你就不必进行密钥循环，并担心由于传播而导致的重复问题。

当状态发生变化时，元素会重复

1 个答案: