将数据放入折线图后模拟器崩溃反应本机

Question

我想从实时数据库中获取我的推送数据并将其显示在我的折线图上，但是当我将从实时 Firebase 数据库中获取的数据作为

data ={chartData}

放入折线图时，我在模拟器中的应用程序将在我运行时崩溃代码。谁能确定我的代码有什么问题？

我的数据库

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