Когда состояние изменяется, элементы дублируются

Question

Я делаю веб-приложение с React и базой данных в реальном времени от Firebase.Функциональность проста: я получаю несколько объектов из Firebase, перебираю их и отображаю список значений.

Проблема возникает, когда я обновляю базу данных из консоли Firebase.Когда я это делаю, состояние меняется, и список перерисовывается, но он дублирует список снова и снова.Я не знаю, делаю ли я что-то неправильно, или мой подход неверен, но я хотел бы отобразить список с информацией об объектах, и когда база данных обновляется, список обновляется (изменяя данные или удаляя записи).

Вот некоторые фрагменты и скриншоты.

Я получаю объекты, сохраняю их в объект и получаю соли / идентификаторы для последующей итерации.

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

Здесь, вгде я перебираю массив идентификаторов и вызываю объект для данных:

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 в реальном времени. До После

Answer 1

Вы можете перебирать объект напрямую с помощью Object.keys , например:

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

Таким образом, вам не придется делать цикл ключей и беспокоиться о дубликате.проблема из-за распространения там.