Next.js中如何将DataTable组件的获取数据传递给Home父组件

1. 把数据获取逻辑上移到Home组件 #

将原本在DataTable里的数据查询逻辑迁移到Home组件，让Home掌握完整的数据集和分页元数据（总条数、总页数等），这样就能直接给Pagination传递所需参数。

示例Home组件代码：

'use client';
import { useState, useEffect } from 'react';
import DataTable from './DataTable';
import Pagination from './Pagination';

export default function Home() {
  const [tableData, setTableData] = useState([]);
  const [totalItems, setTotalItems] = useState(0);
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10; // 可根据需求调整每页展示条数

  // 带分页参数的数据查询函数
  const fetchTableData = async () => {
    try {
      // 替换为你的数据库查询接口，传入当前页和每页条数
      const res = await fetch(`/api/your-data-endpoint?page=${currentPage}&limit=${itemsPerPage}`);
      const result = await res.json();
      setTableData(result.list); // 表格列表数据
      setTotalItems(result.totalCount); // 数据总条数
    } catch (err) {
      console.error('数据查询失败:', err);
    }
  };

  // 页码切换时重新拉取对应页数据
  useEffect(() => {
    fetchTableData();
  }, [currentPage]);

  // 分页切换回调，传给Pagination组件
  const handlePageSwitch = (pageNum) => {
    setCurrentPage(pageNum);
  };

  return (
    <div className="page-container">
      {/* 直接传入数据给DataTable，只负责渲染 */}
      <DataTable data={tableData} />
      {/* 在Home里直接调用Pagination，传递分页所需参数 */}
      <Pagination 
        currentPage={currentPage}
        totalItems={totalItems}
        itemsPerPage={itemsPerPage}
        onPageChange={handlePageSwitch}
      />
    </div>
  );
}

2. 简化DataTable组件，仅负责渲染 #

修改DataTable，去掉内部的数据查询逻辑，通过props接收Home传递的表格数据，专注于表格渲染：

export default function DataTable({ data }) {
  return (
    <table className="data-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          {/* 其他表头字段 */}
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            {/* 其他数据字段渲染 */}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

3. 确保Pagination组件适配props传递 #

你的Pagination组件只需保持原有逻辑，接收currentPage、totalItems、itemsPerPage参数，并在页码切换时触发onPageChange回调即可，示例：

export default function Pagination({ currentPage, totalItems, itemsPerPage, onPageChange }) {
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  const pageNumbers = Array.from({ length: totalPages }, (_, idx) => idx + 1);

  return (
    <div className="pagination-bar">
      <button 
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage === 1}
      >
        上一页
      </button>
      {pageNumbers.map(page => (
        <button
          key={page}
          onClick={() => onPageChange(page)}
          className={currentPage === page ? 'active-page' : ''}
        >
          {page}
        </button>
      ))}
      <button 
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
      >
        下一页
      </button>
    </div>
  );
}

额外说明 #

如果因为DataTable需要在多个场景独立使用，不能把数据逻辑全移到Home，也可以通过回调函数让DataTable把分页元数据传递给Home：

• Home里定义回调函数onDataLoaded，传给DataTable
• DataTable查询到数据后，调用onDataLoaded把总条数等信息传回Home
• Home拿到数据后再传给Pagination

但更推荐第一种方案，它符合React状态提升原则，组件职责划分更清晰，也更便于后续维护。

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