React Native firebase realtimedatabase查询内部的useEffect()循环.<

Question

嘿，伙计们，我正试图从firebase的实时数据库中获取数据。我无法找到一种方法来等待useEffect()在将折线图返回到react-native应用程序之前完成firebase查询，我正在使用expo将项目构建到运行android 11的android模拟设备上。这是误差。我能够通过将静态数据发布到图形，然后在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([]);
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>
);
}