如何解决react-data-table-component加载前显示「无记录」的问题

问题原因分析 #

1. 状态逻辑颠倒：原代码中loading初始值为false，API请求完成后才设为true，导致Loader提前消失，表格已渲染但数据还未加载完成
2. 单状态无法覆盖多请求：两个API请求（获取角色、获取校友数据）共用一个loading状态，角色请求完成后就切换到表格视图，此时校友数据还在加载中，表格因空数据显示“No records to display”
3. 人为延迟干扰：代码中多余的setTimeout拉长了数据加载的时间差，加剧了无数据提示的显示时长

修复方案及代码修改 #

1. 拆分加载状态

将单一的loading拆分为两个状态，分别跟踪角色和校友数据的加载过程：

const [rolesLoading, setRolesLoading] = useState(true);
const [alumniLoading, setAlumniLoading] = useState(true);
const [roles, setRoles] = useState([]);
const [alumni, setAlumni] = useState([]);
const [selectedRoleId, setSelectedRoleId] = useState(null);

2. 修正API请求的状态控制逻辑

移除多余的setTimeout，在请求开始时设置加载状态为true，请求结束（成功/失败）时设为false：

修改getRoles函数：

const getRoles = async () => {
  try {
    const apiRes = await ListRoles();
    if (apiRes.status === 200) {
      const roleData = apiRes?.data?.data || [];
      setRoles(roleData);
      const alumniRole = roleData.filter(item => item?.role === "Alumni");
      // 严谨判断数组是否有数据
      if (alumniRole.length > 0) {
        setSelectedRoleId(alumniRole[0].id);
      }
    } else {
      toast.error(apiRes?.data?.message || '获取角色失败，请重试', {
        position: toast.POSITION.BOTTOM_LEFT
      });
    }
  } catch (err) {
    toast.error('获取角色失败，请重试', {
      position: toast.POSITION.BOTTOM_LEFT
    });
  } finally {
    // 请求结束后无论结果如何，关闭角色加载状态
    setRolesLoading(false);
  }
};

修改listAllAlumni函数：

const listAllAlumni = async () => {
  if (!selectedRoleId) return;
  // 请求开始时开启加载状态
  setAlumniLoading(true);
  try {
    const apiRes = await listAllUsers({ roleId: selectedRoleId });
    if (apiRes.status === 200) {
      const filteredData = (apiRes?.data?.data || []).filter(item => item?.id !== id && item?.isPaymentCompleted !== false)
        .map((item, index) => ({
          id: item?.id,
          slno: index + 1,
          name: `${item?.firstName} ${item?.lastName}`,
          firstName: item?.firstName,
          lastName: item?.lastName,
          email: item?.email,
          mobileNo: item?.mobileNo,
          passingOutClass: item?.passingOutClass || '未提供',
          avatar: item?.avatar,
        }));
      setAlumni(filteredData);
    } else {
      toast.error(apiRes?.data?.message || '获取校友数据失败，请重试', {
        position: toast.POSITION.BOTTOM_LEFT
      });
    }
  } catch (err) {
    toast.error('获取校友数据失败，请重试', {
      position: toast.POSITION.BOTTOM_LEFT
    });
  } finally {
    // 请求结束后关闭加载状态
    setAlumniLoading(false);
  }
};

3. 调整表格渲染条件

确保只有当两个请求都完成后才渲染表格，否则保持显示Loader：

{rolesLoading || alumniLoading ? (
  <div><Loader /></div>
) : (
  <Card className='alumni_data'>
    <DataTable
      columns={columns}
      data={alumni.filter((row) =>
        row.name?.toLowerCase().includes(searchText.toLowerCase()) ||
        row.passingOutClass?.toLowerCase().includes(searchText.toLowerCase())
      )}
      defaultSortField="name"
      sortIcon={<NorthIcon />}
      pagination
      paginationPerPage={50}
      paginationRowsPerPageOptions={[50, 100, 500]}
      selectableRows={false}
      customStyles={tableCustomStyles}
      fixedHeader
      striped
      // 自定义无数据提示，仅当确实无数据时显示
      noDataComponent={alumni.length === 0 ? "暂无校友数据" : null}
    />
  </Card>
)}

关键修改点总结 #

• 拆分加载状态，精准控制每个API请求的加载过程
• 修正加载状态的切换时机，请求开始时开启加载，结束后关闭
• 移除不必要的setTimeout，减少人为延迟
• 优化数组判断逻辑，避免空数组被误判为有效数据
• 自定义表格无数据提示，避免加载过程中误显示

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