Estoy tratando de representar los datos de la tabla desde la API usando fetch, el siguiente es el fragmento de código, los datos de visualización de la tabla desaparecen si navega a una página diferente o actualiza la página. Cualquier ayuda es apreciada.
Vídeo de referencia: 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)Las columnas y filas se obtienen de nextjs api, hágamelo saber para obtener más información.
Simplemente agregué la variable de estado de carga y usé el efecto de uso para resolverlo.
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]);