Блог

Я использую функциональные компоненты с крючками и извлекаю 3 фрагмента данных, связанных с covid-19, таких как дата, подтвержденные случаи и смерти, а затем сохраняю эти данные в этом компоненте. Я хотел бы построить двухосную линейную диаграмму с осью X, представленной датой, и двумя линиями, представляющими подтвержденные случаи заболевания и смерти, произошедшие в эту конкретную дату. После успешного хранения данных я преобразую их в массив, а затем передаю компоненту диаграммы в виде массива объектов. Однако данные отображаются на экране, но строки не отображаются.

 import React, { useEffect, useState } from "react"; import { fetchDailyData } from "../../api";  import classes from './Chart.css'; import { BarChart, Bar, CartesianGrid, XAxis, YAxis,Tooltip,Legend } from 'recharts'; import {  LineChart,  Line, } from "recharts";  const Chart = ({data:{confirmed,deaths,recovered},country}) =gt; {   const [dailyData,setDailyData]= useState([]);   useEffect(()=gt; {  const fetchApi = async() =gt; {  setDailyData(await fetchDailyData());  }   fetchApi();  },[])  const data = [  {  name: dailyData.map(({ date }) =gt; new Date(date).toLocaleDateString()),  confirmed: dailyData.map((data) =gt; data.confirmed),  deaths:dailyData.map((data) =gt; data.deaths)  }   ];      return (  lt;div className={classes.container}gt;  lt;LineChart width={730} height={250} data={data}  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}gt;  lt;CartesianGrid strokeDasharray="3 3" /gt;  lt;XAxis dataKey="name" /gt;  lt;YAxis /gt;  lt;Tooltip /gt;  lt;Legend /gt;  lt;Line type="monotone" dataKey="confirmed" stroke="#0095FF" /gt;  lt;Line type="monotone" dataKey="deaths" stroke="#0095FF" /gt;  lt;/LineChartgt;  lt;/divgt;  ) }   export default Chart;