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.
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]);