Estoy trabajando en este momento en un proyecto de criptomoneda, que muestra un gráfico de líneas de una moneda durante todo un año, estoy usando reaccionar como mi interfaz y nodejs como mi backend.

No puedo decir dónde está el problema, he mapeado la información de la fecha diaria y el precio de la moneda (btc), y estoy tratando de mostrarlo como una línea, y no muestra la información después de que mapeé se ve así:

las fechas - fechas

los precios - precios

también el gráfico en el sitio se ve así: gráfico

Aplicación.js

 function App() { var [details, setDetails] = useState(); var [details2,setDetails2] = useState(); var o = [] // empty Object var price=0; var date=""; var i=1; var array=""; var years; var prices1; useEffect(()=> { Axios.get('http://localhost:3002/bitcoin').then((response,ans)=> { var array1=response.data.split("space"); array1.pop(); array1.forEach(function(value) { console.log(value); date=value.split(":")[0]; price=parseFloat(value.split(":")[1]); o.push({date,price}); i++; }); years = o.map(value => value.date); prices1=o.map(value2=>value2.price); setDetails(years); setDetails2(prices1); }) }) console.log(details); console.log(details2);//trying to figure out in the site if the info is correct const [userData, setUserData] = useState({ labels: details,//supposed to show up the graph with the info , can only see the graph without no info datasets: [ { label: "Price", data: details2, backgroundColor: [ "rgba(75,192,192,1)", ], borderColor: "black", borderWidth: 2, }, ], }); return ( <div className="App"> <h1>fedgfdsgs</h1> <div style={{ width: 1500 }}> <LineChart chartData={userData} /> </div> </div> ); } export default App;

LineChart.js

 import React from "react"; import { Line } from "react-chartjs-2"; function LineChart({ chartData }) { return <Line data={chartData} />; } export default LineChart;

// editar no estoy seguro de si esto es un problema, pero la primera vez que intento consolar. registrar las variables detalles y detalles2 no están definidos - gracias por tu tiempo :)