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

Question

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?

Can you put a `console.log(serverData)` before `return` inside the functional component to find out what's coming as `serverData` ? Please put that in your question as well. — Kavindu Vindika, Oct 17 '21 at 04:26

score 1 · Answer 1 · answered Oct 17 '21 at 06:53

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

score 0 · Accepted Answer · edited Oct 17 '21 at 06:15

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

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

2 Answers2