Tengo un problema con la visualización de datos provenientes de una API en el gráfico que proviene de la biblioteca de Recharts. Para lograr eso, estoy tratando de hacer uso de Object.entries. Esta es mi estructura de API: {"deviceId":"27ff89713e684bbd8f13820c53908e79","G1HNQ3":97,"BBPF0F":-220} Los valores de esas propiedades no son estáticos y siguen cambiando. Para cualquier consejo de solucionar este problema estaría muy agradecido,

Gracias

Por favor, eche un vistazo a mi código:

 import "./App.css"; import React, { Component } from "react"; import logo from "./Logo.jpg"; import axios from "axios"; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, } from "recharts"; class App extends Component { state = { data: [] }; componentDidMount() { const dataInterval = setInterval(this.getData, 1000); } componentDidUpdate() { console.log(this.state.data); } getData = async () => { await axios.get("/random-data").then((res) => { this.setState({ data: [ ...this.state.data, res.data, { currentDateTime: Date().toLocaleString() }, ], }); }); }; renderLine = () => { Object.entries(this.state.data).forEach(([key, value]) => { Object.entries(value).forEach(([key, value]) => { if (key === "deviceId" || key === typeof Number) { return; } return <Line type="monotone" dataKey={key} stroke="red" />; }); // }); }; render() { return ( <div className="App" style={{ display: "flex", flexDirection: "column", alignItems: "center", }} > <img src={logo} alt="BromleySat" /> <h1 style={{ color: "green" }}>BromleySat's Serial Plotter</h1> <LineChart width={1000} height={300} data={this.state.data}> <CartesianGrid></CartesianGrid> <XAxis dataKey="currentDateTime"></XAxis> <YAxis></YAxis> <Tooltip></Tooltip> <Legend></Legend> {this.renderLine()} </LineChart> </div> ); } } export default App;