如何在排序/屏幕尺寸变更时重置页面并优化useCallback调用？

你当前代码的核心问题是：当Sorting或ScreenSize变化时，重置页码的操作与getData的依赖变更会导致重复触发数据请求，甚至可能出现时序冲突。以下是两种合理的优化方案：

方案一：合并重置与请求逻辑，简化依赖 #

把重置页面和数据请求的逻辑整合，同时优化getData的依赖项，避免不必要的回调重建：

const [Sorting, setSorting] = useState<string>('');
const [CurrentPage, setCurrentPage] = useState<number>(1);
const [Data, setData] = useState<data[]>([]);

// 将动态参数通过入参传递，减少回调依赖
const getData = useCallback(async (page: number, sort: string) => {
  try {
    const DataResponse = await getData({
      limit: 10,
      offset: 10 * (page - 1),
      sort: sort || 'ascending',
    });
    setData(DataResponse);
  } catch (err) {
    console.error('数据获取失败:', err);
  }
}, []);

// 首次渲染、页码/排序变化时自动请求数据
useEffect(() => {
  getData(CurrentPage, Sorting);
}, [CurrentPage, Sorting, getData]);

// 排序或屏幕尺寸变化时，重置页面状态
useEffect(() => {
  setData([]);
  setCurrentPage(1);
}, [Sorting, ScreenSize]);

方案优势 #

• getData不再依赖Sorting和CurrentPage，避免每次参数变化时重建回调
• 重置页码后，CurrentPage的变更会自动触发数据请求，逻辑更连贯
• 避免重复请求，减少不必要的网络开销

方案二：控制请求触发时机，适配原有回调结构 #

如果不想修改getData的结构，可以调整重置逻辑的时序，确保只触发一次请求：

const [Sorting, setSorting] = useState<string>('');
const [CurrentPage, setCurrentPage] = useState<number>(1);
const [Data, setData] = useState<data[]>([]);

const getData = useCallback(async () => {
  try {
    const DataResponse = await getData({
      limit: 10,
      offset: 10 * (CurrentPage - 1),
      sort: Sorting ? Sorting : 'ascending',
    });
    setData(DataResponse);
  } catch (err) {
    console.error('数据获取失败:', err);
  }
}, [Sorting, CurrentPage]);

// 首次渲染及回调变更时请求数据
useEffect(() => {
  getData();
}, [getData]);

// 排序或屏幕尺寸变化时重置页面，处理边界情况
useEffect(() => {
  setData([]);
  setCurrentPage(prev => {
    // 若当前已是第1页，手动触发请求刷新数据
    if (prev === 1) {
      getData();
      return prev;
    }
    return 1;
  });
}, [Sorting, ScreenSize, getData]);

方案注意点 #

• 当Sorting或ScreenSize变化但页码已是1时，需要手动调用getData刷新数据
• 利用函数式更新判断状态，避免不必要的状态变更触发重复渲染

关键优化总结 #

• 尽量通过入参传递动态值，减少回调的依赖项数量
• 确保重置操作后只触发一次数据请求，避免重复网络调用
• 添加错误处理逻辑，提升页面稳定性

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