reactjs 如何将静态JSON作为数据添加到react-table中?

elcex8rz  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(143)

使用react-table v7库,我创建了一个表。我在这个表中提供的数据被预取并保存为JSON。这个JSON文件具有react-table所需要的格式。
但是我的数据非常庞大,而且有很多很深的层次结构,我正在创建扩展选项表,当我将这些数据输入到react-table时,渲染时间太长,这降低了应用程序的整体速度。
我想添加延迟加载,这样当用户单击扩展选项时,该行的子数据应该从我的数据中动态添加。我指的是这个example延迟加载在这个例子中,子数据是在点击时提取的,是随机创建的,没有层次结构需要维护。在我的例子中,数据已经存在,当用户单击扩展行按钮时,我希望获取该特定行的子行。
总之,当用户单击父行时,如何获取子行?
我附加了一个link到代码沙箱,我在那里创建了静态数据的React表。
让我知道,如果我错过了什么或您需要更多的细节。谢谢
我尝试使用前面提到的示例实现延迟加载,但是该示例中延迟加载行的数据是随机生成的,而在我的情况下,我希望获取父行的展开按钮被按下的行的数据。

jgovgodb

jgovgodb1#

你可以使用useEffect钩子来加载数据。

import { useState, useEffect } from 'react';

创建一个状态变量来存储数据,并创建一个状态变量来存储当前数据页:

const [data, setData] = useState([]);
const [pageData, setPageData] = useState([]);

使用useEffect:

useEffect(() => {
  // Load the first page of data
  const loadData = async () => {
    // Fetch the data from the JSON file
    const response = await fetch('data.json');
    const jsonData = await response.json();

    // Set the data to the state variable
    setData(jsonData);

    // Set the first page of data to the pageData state variable
    setPageData(jsonData.slice(0, 10));
  };
  loadData();
}, []);

然后传入pageData状态变量作为数据属性

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
  data: pageData,
  // ... other table configuration options
});

添加按钮以加载下一页数据

const handleLoadNextPage = () => {
  // Calculate the next page of data
  const nextPageData = data.slice(pageData.length, pageData.length + 10);

  // Update the pageData state variable with the next page of data
  setPageData([...pageData, ...nextPageData]);
};

最后,在组件中呈现表格和按钮,可能如下所示:

return (
  <>
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
    <button onClick={handleLoadNextPage}>Load Next Page</button>
  </>
);

希望这能有所帮助。

相关问题