Seguí esta página: https://blog.logrocket.com/using-chart-js-react/ Los datos se cargan en los datos y veo en la consola, pero los datos no se cargan en el estado de uso
import React, { useEffect, useState } from "react"; import budgetApi from "../api/budgetApi"; import { Bar } from "react-chartjs-2"; const BarChart = () => { const [chartData, setChartData] = useState({}); useEffect(() => { getDataFromChart(); }, []); const getDataFromChart = async () => { try { const response = await budgetApi.getByCategory(); const data = response.data; setChartData({ labels: [data.map((budget) => budget.category)], datasets: [ { label: "Forint", data: [data.map((budget) => budget.total_amount)], backgroundColor: ["#ffbb11", "#ecf0f1", "#50AF95"], borderWidth: 1, }, ], }); console.log(chartData); //Empty! } catch (error) { console.log(error); } }; return ( <div> { <Bar data={chartData} options={{ plugins: { title: { display: true, text: "Cryptocurrency prices", }, legend: { display: true, position: "bottom", }, }, }} /> } </div> ); }; export default BarChart;Recibo algunos errores, por ejemplo: no se puede acceder a la propiedad "mapa", nextDatasets no está definido . Creo que lo entiendo porque chartData está vacío.
Por favor ayuda. gracias por las respuestas
No está obteniendo los datos en console.log ya que setChartData cambia el estado, pero el estado cambiado aún no está disponible en la siguiente fila.
Está recibiendo el error ya que, al principio, antes de que los datos se carguen en el objeto después de la llamada asincrónica, el objeto es {} , por lo que está vacío y no tiene ninguna clave.
Debe evitar mostrar el componente Bar antes de que se carguen los datos, por lo que puede poner un estado de carga o verificar cualquier tecla que esté esperando en el objeto, como
if (chartData.data) { return <Bar />; // With the props you need } return <></>;const [chartData, setChartData] = useState({}); Ha configurado su estado inicial para que sea un objeto vacío. En su primer renderizado, está pasando ese objeto vacío a <Bar data={chartData}> . <Bar> no espera un objeto vacío, por lo que genera una excepción en esta línea de código .
Eventualmente carga datos, pero el error ocurrió antes de eso. Entonces, mientras espera que se carguen los datos, debe no representar el gráfico de barras en absoluto o pasarlo en suficientes datos ficticios para que pueda hacer su trabajo. Por ejemplo:
const [chartData, setChartData] = useState(null); // null is easier to check for than {} // ... return ( <div> {!chartData ? ( <span>Loading...</span> ) : ( <Bar data={chartData} options={{ // etc /> )} </div> );consola.log(datosgráficos); //¡Vacío!
Esta declaración de registro lo está desviando. Esto siempre mostrará los datos del gráfico anterior, aunque haya establecido correctamente el estado. Si desea verificar que su componente se está volviendo a procesar, coloque su declaración de registro en el cuerpo del componente (aún deberá solucionar el problema que mencioné en la parte superior)
Consulte esta pregunta para obtener más información acerca de por qué esta declaración de registro no funciona: el método set useState no refleja un cambio inmediatamente