无法在react本机图表工具包中使用动态数据

Question

我试图渲染从firestore获取的数据，并将它们显示在react原生图表工具包中。然而，我总是面临以下错误：

无效编号：M0,0 L-Infinity，181 L64181

我通过以下函数正确地从数据库中获取了数据：

const getweight = () =>
firebase
.firestore()
.collection("weights")
.orderBy("time")
.where("user", "==", "1")
.get()
.then((querySnapshot) => {
let result = [0];
querySnapshot.forEach((doc) => {
result.push(+doc.data().Weight);      
});
setDateTracker(date);
if (result.length) {
setWeighTracker(result);
}
});

所以，我得到了具有正确数据的数组。

然后，我将数据推送到以下状态：

const [weightTracker, setWeighTracker] = useState([0]);

当我尝试将数据显示到下面的图表时，我得到了无效数字的错误

<LineChart
data={{
datasets: [
{
data: weightTracker.map((item) => {
return item.Weight;
}),
},
],
}}
width={Dimensions.get("window").width} // from react-native
height={220}
yAxisLabel=" KG "
//withVerticalLabels={false}
chartConfig={{
backgroundColor: "#e26a00",
backgroundGradientFrom: "#fb8c00",
backgroundGradientTo: "#ffa726",
decimalPlaces: 0, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 1,
},
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16,
}}
/>

Answer 1

即使数据的初始状态为0，我也遇到了同样的错误。我的固定做法是只在加载数据后显示图表。

你可以在你的图表代码之前添加这样的if检查：

if (weightTracker?.length === 0) {
return (
<View style={styles.screen}>
<Text>No chart data to display!</Text>
</View>
);
}
return (...<your linechart code>)

要使if检查工作，还需要将weightTracker的初始状态设置为仅空数组。希望这能有所帮助。