Блог

ПРЕДЫСТОРИЯ:

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

ПРОБЛЕМА

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

код

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

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

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

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

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

Обратите внимание, что я использовал data вместо snapshot для 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);
      });
  }