Question

0

152

Views

react-table not rendering data in the initial load and after page refresh

I am trying to render table data from API using fetch, following is the code snippet, table display data disappears if navigate to a different page or refresh the page. Any help is appreciated.

Ref Video: https://watch.screencastify.com/v/EwWkC48SDpulXvRltTdS

import { useState, useMemo, useEffect } from "react";
import { useTable } from "react-table";

const TableData = () => {
  const [columns, setColumns] = useState([]);
  const [data, setData] = useState([]);
  const tableInstance = useTable({ columns, data });
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    tableInstance;

  useEffect(() => {
    async function fetchData() {
      try {
        // Fetch columns
        let colArr = [];
        let responseCol = await fetch("/api/columns");
        responseCol = await responseCol.json();
        responseCol.forEach((record) => {
          let recordObject = {
            Header: `${record.label}`,
            accessor: `${record.value}`,
          };
          colArr.push(recordObject);
        });
        setColumns(colArr);
        // Fetch Rows
        let rowArr = [];
        let rowObj = {};
        let responseRow = await fetch("/api/rows");
        responseRow = await responseRow.json();
        rowArr.length = 0;
        responseRow.records.forEach((record) => {
          columns.forEach((column) => {
            rowObj[`${column.accessor}`] = `${record[column.accessor]}`;
          });
          console.log("RowObj ", rowObj);
          rowArr.push(rowObj);
          rowObj = {};
          console.log("RowArr ", rowArr);
        });
        setData(rowArr);
      } catch (e) {
        console.log(e.message);
      }
    }
    fetchData();
  }, []);

  return (Rendering table)

Columns & Rows are fetched from nextjs api, please let me know for more information.

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T12:47:46.721Z

I simply added loading state variable and used in useeffect to solve it.

useEffect(() => {
    async function fetchData() {
      try {
        //Fetch Columns
        let responseCol = await fetch("/api/columns");
        responseCol = await responseCol.json();
        setOptions(responseCol);
        // Fetch Rows
        let rowArr = [];
        let rowObj = {};
        let responseRow = await fetch("/api/rows");
        responseRow = await responseRow.json();
        rowArr.length = 0;
        responseRow.records.forEach((record) => {
          columns.forEach((column) => {
            rowObj[`${column.accessor}`] = `${record[column.accessor]}`;
          });
          console.log("RowObj ", rowObj);
          rowArr.push(rowObj);
          rowObj = {};
          console.log("RowArr ", rowArr);
        });
        setData(rowArr);
        setIsLoading(false);
      } catch (e) {
        console.log(e.message);
      }
    }
    fetchData();
  }, [isLoading, columns]);