React Table实现点击View More逐批加载数据功能咨询

实现方案 #

核心逻辑：在TableWrapper组件内维护当前展示条数的状态，对全量数据做切片后传给TableBody渲染，点击「View More」按钮时累加展示条数，直到覆盖全部数据。

1. 修改 TableWrapper.js #

新增展示条数状态、切片逻辑，以及按钮显隐控制：

import { useState } from 'react';
import TableHead from './TableHead';
import TableBody from './TableBody';

const TableWrapper = ({...props}) => {
  const { tableData, columns } = props;
  // 初始展示10条
  const [displayCount, setDisplayCount] = useState(10);
  // 全量数据总条数，可根据你的实际数据结构调整取值路径
  const totalData = tableData?.data?.firstResponse || [];
  const totalCount = totalData.length;

  const addNewRows = () => {
    // 每次新增10条，最多不超过总条数
    setDisplayCount(prev => Math.min(prev + 10, totalCount));
  };

  // 切片得到当前要展示的数据
  const currentDisplayData = totalData.slice(0, displayCount);

  return (
    <>
      <table>
        <TableHead headers={columns} />
        {/* 把切片后的数据传给TableBody */}
        <TableBody rows={currentDisplayData} headers={columns} />
      </table>
      {/* 已展示全部数据时隐藏按钮 */}
      {displayCount < totalCount && (
        <div onClick={addNewRows} style={{cursor: 'pointer', marginTop: 8}}>
          View more
        </div>
      )}
    </>
  );
};

export default TableWrapper;

2. 修改 TableBody.js #

移除原有的全量数据读取逻辑，直接渲染父组件传入的切片数据：

import { useState, useEffect } from 'react';
import TableRow from './TableRow';

const TableBody = ({...props}) => {
  const { rows, headers } = props;
  const [columnHeaderKeys, setColumnHeaderKeys] = useState([]);

  useEffect(()=>{
    const keysArray = headers.map(headKeys => headKeys.field);
    setColumnHeaderKeys(keysArray);
  },[headers])

  return (
    <tbody>
      {rows.length > 0 ? (
        rows.map((row, index)=> (
          <tr key={index}>
            <TableRow data={row} keys={columnHeaderKeys}/>
          </tr>
        ))
      ) : (
        <tr>
          <td colSpan={headers.length} style={{textAlign: 'center', padding: 16}}>
            No Data is there
          </td>
        </tr>
      )}
    </tbody>
  );
};

export default TableBody;

3. 其余组件无需修改 #

TableHead和TableRow的现有逻辑完全符合需求，不需要调整。 #

注意事项 #

• 如果你的全量数据存储路径和示例不一致，调整TableWrapper中totalData的取值逻辑即可
• 示例中把原fragment替换为普通div是为了方便加点击样式，你可以根据需求换回React.Fragment

内容的提问来源于stack exchange，提问作者Enigmatic