Question

背景：

我正在尝试使用反应Google图表来检索数据并绘制饼图。

问题

三次检索数据（不应该发生）

代码

我已经在控制台上记录了问题。

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

任何建议，都会有所帮助，预先感谢

Answer 1

firebaseLooper正在将三个对象推送到数据。删除每个循环，只按一次即可解决您的问题。

Answer 2

console.log 发生了多次，因为您在for循环中使用了 foreach 。如下更改代码，它将正常工作。

请注意，我为 foreach 使用了data而不是快照。您还可以使用快照。

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

React正在三次检索Firebase数据

2 个答案: