在 useEffect() 循环中 React Native firebase 实时数据库查询

Question

大家好，我正在尝试从有问题的 firebase 实时数据库中获取数据。在将折线图返回到 react-native 应用程序之前，我无法找到等待 useEffect() 完成 firebase 查询的方法，我正在使用 expo 将项目构建到运行 android 11 的 android 模拟设备上。@987654321 @ 我可以通过将静态数据发布到图表然后在 firebase 查询完成后更改数据来使其工作。 before edit & after edit 任何帮助将不胜感激，或者提供一个我还没有找到的链接。 :)

import * as React from "react";
import { useState, useEffect } from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import { LineChart } from "react-native-chart-kit";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  Temputure: {
    fontSize: 10,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
});

export default function FireBaseTest() {
  const [Temputure, setTemputure] = useState([]);
  const [date, setDate] = useState();
  const [time, setTime] = useState([]);
  const graphTimeLengh = 12;

  useEffect(() => {
    const db = firebase.database();
    const temparray = [];
    for (let i = -1; i < graphTimeLengh; i++) {
      db.ref("0/20-08-2021 " + i + "/0/Temp").on("value", (snapshot) => {
        const response = snapshot.val();
        temparray[i] = response;
      });
    }
    setTemputure(temparray);
    db.ref("0/20-08-2021 0/0/Date").on("value", (snapshot) => {
      const response = snapshot.val();
      setDate(response);
    });

    const timearray = [];
    for (let i = -1; i < graphTimeLengh; i++) {
      db.ref("0/20-08-2021 " + i + "/0/Time").on("value", (snapshot) => {
        const response = snapshot.val();
        timearray[i] = response;
      });
    }
    setTime(timearray);
  }, [date, time, Temputure]);

  const linedata = {
    labels: time,
    datasets: [
      {
        data: Temputure,
        strokeWidth: 5, // optional
      },
    ],
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>FireBaseTest</Text>

      <Text>{date}</Text>

      <LineChart
        data={linedata}
        width={Dimensions.get("window").width}
        height={220}
        yAxisSuffix="°C"
        yAxisInterval={1}
        fromZero={true}
        chartConfig={{
          backgroundColor: "#1cc910",
          backgroundGradientFrom: "#eff3ff",
          backgroundGradientTo: "#efefef",
          decimalPlaces: 1,
          color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,
          style: {
            borderRadius: 16,
          },
        }}
      />
    </View>
  );
}

对不起，如果这个问题措辞不当，这是我的第一个问题，并试图遵循问题格式。还有任何建议下次我想发布问题以及添加什么内容将不胜感激谢谢

Answer 1

刚刚将我的线路数据更改为在使用效果到达后将更新但在等待时显示“等待”和1的状态

import firebase from "./firebase";
import * as React from "react";
import { useState, useEffect } from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import { LineChart } from "react-native-chart-kit";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  Temputure: {
    fontSize: 10,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
});

export default function FireBaseTest() {
  const [Temputure, setTemputure] = useState([1]);
  const [date, setDate] = useState();
  const [time, setTime] = useState(["Wait"]);
  const graphTimeLengh = 12;
  const db = firebase.database();

  const linedata = {
    labels: time,
    datasets: [
      {
        data: Temputure,
        strokeWidth: 5,
      },
    ],
  };

  useEffect(() => {
    const temparray = [];
    for (let i = 0; i < graphTimeLengh; i++) {
      db.ref("0/20-08-2021 " + i + "/0/Temp").on("value", (snapshot) => {
        const response = snapshot.val();
        temparray[i] = response;
      });
    }
    db.ref("0/20-08-2021 0/0/Date").on("value", (snapshot) => {
      const response = snapshot.val();
      setDate(response);
    });
    const timearray = [];
    for (let i = -1; i < graphTimeLengh; i++) {
      db.ref("0/20-08-2021 " + i + "/0/Time").on("value", (snapshot) => {
        const response = snapshot.val();
        timearray[i] = response;
      });
    }

    setTemputure(temparray);
    setTime(timearray);
  }, [db]);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>FireBaseTest</Text>

      <Text>{date}</Text>

      <LineChart
        data={linedata}
        width={Dimensions.get("window").width}
        height={220}
        yAxisSuffix="°C"
        yAxisInterval={1}
        fromZero={true}
        chartConfig={{
          backgroundColor: "#1cc910",
          backgroundGradientFrom: "#eff3ff",
          backgroundGradientTo: "#efefef",
          decimalPlaces: 1,
          color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,
          style: {
            borderRadius: 16,
          },
        }}
      />
    </View>
  );
}