在使用react钩子时，如何在react-chartjs中使用动态数据？

npm install react-chartjs-2 chart.js

import React, { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';

const ChartComponent = () => {
  const [chartData, setChartData] = useState({});
  
  // 在这里获取动态数据并更新chartData状态变量
  useEffect(() => {
    const fetchData = async () => {
      // 使用异步请求或其他方式获取动态数据
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      
      // 处理数据并更新chartData状态变量
      const chartData = {
        labels: data.labels,
        datasets: [
          {
            label: '动态数据',
            data: data.values,
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
          }
        ]
      };
      
      setChartData(chartData);
    };
    
    fetchData();
  }, []);
  
  return (
    <div>
      <Line data={chartData} />
    </div>
  );
};