如何从react本机中的API响应更新折线图的值

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

const LineChart = () => {
  const [chartData, setChartData] = useState({});
  
  // 在这里定义API请求的URL和其他必要的参数
  
  useEffect(() => {
    // 在这里发送API请求，并将响应数据更新到chartData状态变量中
  }, []);
  
  return (
    <div>
      <Line data={chartData} />
    </div>
  );
};

useEffect(() => {
  fetch('API_URL')
    .then(response => response.json())
    .then(data => {
      // 在这里根据API响应数据的格式，将数据转换为适用于折线图的格式
      // 并更新chartData状态变量
      setChartData(transformData(data));
    })
    .catch(error => {
      console.error('API请求失败:', error);
    });
}, []);

const transformData = (data) => {
  // 根据API响应数据的格式，将数据转换为适用于折线图的格式
  // 例如，假设API响应数据格式为[{ date: '2022-01-01', value: 10 }, { date: '2022-01-02', value: 20 }]
  // 可以使用map()方法将其转换为以下格式：{ labels: ['2022-01-01', '2022-01-02'], datasets: [{ data: [10, 20] }] }
  
  const labels = data.map(item => item.date);
  const values = data.map(item => item.value);
  
  return {
    labels: labels,
    datasets: [
      {
        data: values
      }
    ]
  };
};

return (
  <div>
    <Line data={chartData} />
  </div>
);