PrimeReact DataTable懒加载问题：数据控制台可见但表格不显示

问题分析 #

导致懒加载分页未生效、数据仅能打印却无法在表格展示的核心错误如下：

• DataTable属性错误：将分页行数配置属性rows误写为row，导致分页逻辑失效
• 请求未携带分页参数：调用接口时未传递page和per_page参数，每次都请求默认第一页数据，懒加载机制无法触发
• Loading状态设置时机错误：setLoading(false)写在axios请求外部，会直接跳过loading状态，表格无法正确感知数据加载过程
• 初始State结构不匹配：初始data设为数组，但接口返回的是包含data和total的对象，首次渲染时data.data为undefined，表格无数据可展示
• 冗余过滤器配置：lazyState中的过滤器与当前表格列不匹配，虽不直接导致不显示，但增加了不必要的状态复杂度

修复后的完整代码 #

import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { DataTable } from 'primereact/datatable';
import { Button } from 'primereact/button';
import { Column } from 'primereact/column';
import "primereact/resources/themes/lara-light-indigo/theme.css";
     
//core
import "primereact/resources/primereact.min.css";

//icons
import "primeicons/primeicons.css";                 
import './App.css';

function App() {
  // 初始值与接口返回结构一致，避免undefined报错
  const [data, setData] = useState({ data: [], total: 0 });
  const [loading, setLoading] = useState(false);
  const [lazyState, setLazyState] = useState({
    first: 0,
    rows: 2, // 与rowsPerPageOptions默认值对应
    page: 1,
    sortField: null,
    sortOrder: null,
    filters: {} // 移除与当前列不匹配的冗余过滤器
  });

  useEffect(() => {
    getall();
  }, [lazyState]);

  const getall = () => {
    setLoading(true);
    // 传递分页参数，实现真正的懒加载分页
    axios.get(`https://reqres.in/api/users?page=${lazyState.page}&per_page=${lazyState.rows}`)
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        // 请求完成后统一关闭loading状态
        setLoading(false);
      });
  }

  const refresh = () => {
    // 刷新时重置懒加载状态到第一页
    setLazyState(prev => ({ ...prev, page: 1, first: 0 }));
  }

  const header = (
    <div>
      <span className="display-6">员工列表</span>
      <Button icon="pi pi-refresh" style={{ marginLeft: '80%' }} rounded raised onClick={refresh} />
    </div>
  );

  const onPage = (event) => {
    setLazyState(event);
  }

  return (
    <>
      <div className="container mt-5">
        <DataTable
          value={data.data}
          header={header}
          lazy
          paginator
          rows={lazyState.rows} // 修正属性名，绑定懒加载状态的行数
          dataKey="id"
          rowsPerPageOptions={[2, 10, 25, 50]}
          showGridlines
          tableStyle={{ minWidth: '60rem' }}
          totalRecords={data.total}
          onPage={onPage}
          loading={loading}
        >
          <Column field="first_name" header="姓名"></Column>
          <Column field="email" header="邮箱"></Column>
        </DataTable>
      </div>
    </>
  );
}

export default App;

关键修复点说明 #

1. 修正分页属性：将row={2}改为rows={lazyState.rows}，确保分页行数与懒加载状态同步
2. 传递分页参数：在axios请求中拼接page和per_page参数，让接口返回对应页的数据
3. 调整Loading状态：使用finally在请求完成后设置loading=false，确保loading状态正确显示
4. 统一State结构：初始data设为{data: [], total: 0}，避免首次渲染时data.data不存在
5. 简化过滤器配置：移除与当前表格列无关的过滤器，保持状态简洁
6. 优化刷新逻辑：刷新时重置懒加载状态到第一页，确保重新加载第一页数据

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