React Native将Firebase数据传入LineChart后模拟器崩溃问题排查

我希望从Firebase实时数据库获取推送数据并在LineChart中展示，但将获取的数据以data={chartData}传入LineChart后，模拟器运行代码时崩溃。请帮忙排查代码问题？

我的数据库结构如下：

对应的代码文件ChartScreen.js：

import React, { useEffect, useState } from 'react';
import { View, Text, Dimensions, StatusBar } from 'react-native';
import { LineChart } from 'react-native-chart-kit';
import { getDatabase, ref, onValue } from 'firebase/database';

export default function ChartScreen() {
  const [chartData, setChartData] = useState({
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [{ data: [] }],
  });

  useEffect(() => {
    const databaseRef = ref(getDatabase(), 'mlx90614/Push');

    onValue(databaseRef, (snapshot) => {
      const data = snapshot.val();
      const newChartData = {
        datasets: [
          {
            data: Object.values(data),
          },
        ],
      };
      setChartData(newChartData);
      console.log(newChartData);
    });
  }, []);

  return (
    <View>
      <StatusBar translucent backgroundColor="transparent" />
      <Text>ChartScreen</Text>
      <LineChart
        data={chartData} 
        width={Dimensions.get('window').width} // from react-native
        height={220}
        yAxisLabel="$"
        yAxisSuffix="k"
        yAxisInterval={1} // optional, defaults to 1
        chartConfig={{
          backgroundColor: '#e26a00',
          backgroundGradientFrom: '#fb8c00',
          backgroundGradientTo: '#ffa726',
          decimalPlaces: 2, // optional, defaults to 2dp
          color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          style: {
            borderRadius: 16,
          },
          propsForDots: {
            r: '6',
            strokeWidth: '2',
            stroke: '#ffa726',
          },
        }}
        bezier
        style={{
          marginTop: 100,
          marginVertical: 8,
          borderRadius: 16,
        }}
      />
    </View>
  );
}

1. 缺失labels字段导致图表渲染失败 #

react-native-chart-kit的LineChart要求data必须包含labels数组（对应X轴标签）。你的代码更新chartData时，仅设置了datasets，完全覆盖了初始状态中的labels，导致图表找不到X轴渲染所需的核心字段，直接引发崩溃。

修复方式：更新数据时保留labels，或根据数据库数据动态生成：

// 方案1：沿用初始定义的labels
const newChartData = {
  labels: chartData.labels,
  datasets: [
    {
      data: Object.values(data),
    },
  ],
};

// 方案2：如果数据库的key可作为标签（比如时间戳、序号），可动态生成
// labels: Object.keys(data),

2. 数据库空值未处理引发错误 #

如果mlx90614/Push节点为空，snapshot.val()会返回null，此时调用Object.values(data)会直接抛出类型错误，导致崩溃。需添加空值判断：

onValue(databaseRef, (snapshot) => {
  const data = snapshot.val();
  if (!data) {
    console.log("数据库节点无数据");
    return;
  }
  // ...后续数据处理逻辑
});

3. 数据类型转换（可选排查点） #

检查数据库中存储的温度值是否为数字类型，如果是字符串格式，需转换为数字后再传入图表：

data: Object.values(data).map(item => Number(item)),

4. 清理数据库监听避免内存泄漏 #

onValue会持续监听数据库变化，组件卸载时需取消订阅，防止内存泄漏：

useEffect(() => {
  const databaseRef = ref(getDatabase(), 'mlx90614/Push');
  const unsubscribe = onValue(databaseRef, (snapshot) => {
    // ...原有逻辑
  });

  // 组件卸载时取消监听
  return () => unsubscribe();
}, []);

内容的提问来源于stack exchange，提问作者Izzat Fahmi