React трижды получает данные из базы данных

Question

ПРЕДПОСЫЛКИ:

Я пытаюсь получить данные и построить круговую диаграмму, используя графики Google реакции.

ПРОБЛЕМА

Данные извлекаются трижды (что не должно происходить)

КОД

У меня консоль зарегистрировала проблему.

https://codesandbox.io/s/3vmo6xw4n1?fontsize=14

Любые предложения, подсказка будет полезна, заранее спасибо

Answer 1

console.log происходил несколько раз, потому что вы использовали foreach внутри цикла for. Измените код, как показано ниже, и он будет работать нормально.

Обратите внимание, что я использовал data вместо снимка для foreach . Вы также можете использовать снимок .

componentDidMount() {
    var subpath = "Maternal/ChildRegistration";
    ///AVgYUYIzOnYnh7D4a5ImKjM63mp2/${subpath}
    var countMale = 0;
    var countFemale = 0;
    firebase
      .database()
      .ref(`users`)
      .once("value")
      .then(snapshot => {
        var count = 0;
        const data = firebaseLooper(snapshot);
        var i;
        var currentsupervisorid = "7Fd8iLXHNlR7qHhdx9DouciKfbC2";
        console.log(data);
        data.forEach(child => {
          if (child.anganwadidetails.supervisorid === currentsupervisorid) {
            console.log(child);
          }
        });
        this.setState({
          value1: countMale,
          value2: countFemale
        });
      })
      .catch(e => {
        console.log("error returned - ", e);
      });
  }

Answer 2

FirebaseLooper выдвигает три объекта к данным.Устранение этого для каждой петли и только один раз должно решить вашу проблему.