CODEWITHSUNDEEP
javascriptnode.jsreactjsaxios
Rafael Picolo
Rafael Picolo

Reputation: 17

React: Creating a table that uses data from a Http GET request

I've been struggling a bit with this library and javascript. So here is the deal, I want to build a table from data I'm collecting from a Http Get request. I'm ok on getting the data, but I'm not able to work with the Data. It says it is an empty array.

Here is the code:

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;

I think I'm struggling in understandig how the async is working and I'm trying to access the data before it is ready. Though I tried everything to make it work and wait for the data to be ready.

Could anyone help me?

Upvotes: 0

Views: 928

Answers (2)

Sahil Rajpal
Sahil Rajpal

Reputation: 540

This is due to async nature of setState. Using Callback can help in your case. I just edited your getData function.

async function getData() {
   await axios
     .get("http://localhost:3333/servers")
     .then((response) => {
        setServerData(response.data, () => {
          fillRows();
          setLoadingData(false);
        }); 
   })
}

Upvotes: 1

Inshaf Ahmed
Inshaf Ahmed

Reputation: 451

The problem here is, setState hook does not Update the synchronously. this topic for more information.

So, this statement:

setServerData(response.data);

not immediately change your serverData , therefore in your fillRows() function serverData is considered an empty array since you defined it as an empty array in the setState initializer.

(since there are many solutions to solve this problem) You can pass response.data to fillRows function (instead of using getting serverData from the state ) like 👉 fillRows(response.data).

So, change your fillRows function to

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);
  }

Upvotes: 0

Related Questions