React中使用useEffect实现页面初始加载无筛选表格数据咨询

1. 核心逻辑调整思路 #

首先把重复的接口请求逻辑抽离为公共函数，供初始化加载、筛选提交、分页切换三个场景调用，避免代码冗余，再通过useEffect监听页码变化自动触发请求，同时实现页面初始化自动加载全量数据。

2. 第一步：抽离公共数据请求函数 #

把原有submit函数里的请求逻辑抽出来，统一处理筛选参数和分页参数：

// 入参为要请求的目标页码
const fetchData = async (targetPage: number) => {
  const param = {
    page: targetPage, // 传递分页参数给后端接口
    // 原有筛选参数逻辑保持不变
    ...(certificateNo && { certificateNo: certificateNo }),
    ...(protoColNo && { protoColNo: protoColNo }),
    ...(requestStatus && { requestStatus: requestStatus }),
    ...(sponser && { sponser: sponser }),
    ...(country && { country: country }),
    ...(noOfSubjects && { noOfSubjects: noOfSubjects }),
    ...(startDate && { startDate: startDate }),
    ...(endDate && { endDate: endDate }),
  };
  const { data } = await axios.get('http://localhost:3000/api/certificates', {
    params: param,
  });
  setFlag(true);
  setResponse(data);
  // *注意：根据你的后端接口实际返回字段调整，确保拿到总页数赋值给lastPage*
  setLastPage(data.totalPage); 
};

3. 第二步：添加useEffect实现初始化加载+分页自动请求 #

import { useEffect } from 'react'; // 确保已经引入useEffect

// 页面首次加载会自动执行，page变化时也会自动触发请求
useEffect(() => {
  fetchData(page);
  // 如果使用eslint规则校验，可配合useCallback包裹fetchData消除依赖警告
}, [page]);

4. 第三步：修改原有submit筛选逻辑 #

筛选提交后重置到第一页，直接调用公共请求函数即可：

const submit = async (e: SyntheticEvent) => {
  e.preventDefault();
  setPage(1); // 筛选后默认回到第一页
  fetchData(1);
};

5. 第四步：修复原有分页逻辑 #

原有分页逻辑存在边界判断错误、异步更新问题，调整后不需要手动调用fetchData，页码变更会自动触发useEffect请求：

const next = () => {
  // 只有当前页小于总页数时才能点击下一页
  if (page < lastPage) {
    setPage(prevPage => prevPage + 1);
  }
};

const prev = () => {
  // 只有当前页大于1时才能点击上一页
  if (page > 1) {
    setPage(prevPage => prevPage - 1);
  }
};

可选优化点 #

如果存在筛选参数变化就实时请求的需求，可把fetchData用useCallback包裹，把所有筛选状态、axios实例作为依赖项，再把fetchData加入useEffect的依赖数组即可，避免不必要的重复请求。

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