He estado luchando un poco con esta biblioteca y javascript. Así que este es el trato, quiero crear una tabla a partir de los datos que estoy recopilando de una solicitud Http Get. Estoy bien para obtener los datos, pero no puedo trabajar con los datos. Dice que es una matriz vacía.
Aquí está el código:
import React, { useEffect, useState } from "react"; import axios from "axios"; import { DataGrid } from "@material-ui/data-grid"; function ServersTable() { const [loadingData, setLoadingData] = useState(true); const [serverData, setServerData] = useState([]); const [rows, setRows] = useState([]); const columns = [ { field: "hostname", headerName: "Hostname", width: 70 }, { field: "memory", headerName: "Memória", width: 70 }, { field: "vCpus", headerName: "vCPUs", width: 70 }, { field: "disk", headerName: "Disco", width: 70 }, { field: "ip", headerName: "IP", width: 70 }, ]; useEffect(() => { async function getData() { await axios .get("http://localhost:3333/servers") .then((response) => { setServerData(response.data); fillRows(); setLoadingData(false); }) } if (loadingData) { getData(); } }, []); function fillRows() { let rowArray = []; for (let count = 0; count < serverData.length; count++) { let row; row = { id: count, hostname: serverData[count].hostname, memory: serverData[count].configuracao.memoryProvisioned + " GB", vCpus: serverData[count].configuracao.cpuProvisioned + " vCPUs", disk: serverData[count].configuracao.totalDiskGB + " GB", ip: serverData[count].ip, }; rowArray.push(row); } setRows(rowArray); } return ( <> {loadingData ? ( <p>Loading Please Wait...</p> ) : ( <DataGrid rows={rows} columns={columns} checkboxSelection /> )} {console.log("Server Data:")} {console.log(serverData)} {console.log("Rows:")} {console.log(rows)} </> ); } export default ServersTable;Creo que me cuesta entender cómo funciona el asíncrono y trato de acceder a los datos antes de que estén listos. Aunque intenté todo para que funcionara y esperé a que los datos estuvieran listos.
¿Alguien podría ayudarme?
Esto se debe a la naturaleza asíncrona de setState. El uso de Callback puede ayudar en su caso. Acabo de editar su función getData.
async function getData() { await axios .get("http://localhost:3333/servers") .then((response) => { setServerData(response.data, () => { fillRows(); setLoadingData(false); }); }) }El problema aquí es que el gancho setState no actualiza sincrónicamente. este tema para obtener más información.
Entonces, esta declaración:
setServerData(response.data); no cambie inmediatamente su serverData , por lo tanto, en su función fillRows() serverData se considera una matriz vacía ya que la definió como una matriz vacía en el inicializador setState .
(ya que hay muchas soluciones para resolver este problema) Puede pasar response.data a la función fillRows (en lugar de obtener datos del serverData del estado) como 👉 fillRows(response.data) .
Entonces, cambie su función fillRows a
function fillRows(responseData) { let rowArray = []; for (let count = 0; count < responseData.length; count++) { let row; row = { id: count, hostname: responseData[count].hostname, memory: responseData[count].configuracao.memoryProvisioned + " GB", vCpus: responseData[count].configuracao.cpuProvisioned + " vCPUs", disk: responseData[count].configuracao.totalDiskGB + " GB", ip: responseData[count].ip, }; rowArray.push(row); } setRows(rowArray); }