React useCallback内外currentPageNumber状态不一致，添加依赖触发无限循环的问题求助

问题分析 #

你遇到的这个问题本质是React闭包特性和useCallback的依赖缓存机制共同导致的：

1. 内部始终输出旧值的原因：
   useCallback会根据依赖数组判断是否重新生成函数。你的依赖数组里没有currentPageNumber，所以当currentPageNumber从0变成3时，fetchMoreItems并没有重新创建——它依然是初始渲染时生成的函数，这个函数的闭包捕获的是初始状态下的currentPageNumber（也就是0），因此每次调用都会输出0。

2. 添加依赖后无限循环的原因：
   当你把currentPageNumber加入依赖数组后，每次currentPageNumber变化，fetchMoreItems都会重新生成一个新函数。如果这个新函数又会触发currentPageNumber的更新（比如在useEffect里调用它，或者在某个事件回调中更新currentPageNumber时调用了它），就会形成循环：currentPageNumber变化 → fetchMoreItems重新生成 → 函数执行触发currentPageNumber更新 → 再次循环。

解决方案 #

根据你的需求，这里提供几种可行的方案：

方案1：用useRef保存最新状态（最直接的解决方式）

useRef的current属性是可变的，不会被闭包捕获旧值，我们可以用它来同步最新的currentPageNumber：

import { useRef, useEffect, useCallback } from 'react';

// ...其他组件代码

const currentPageRef = useRef(currentPageNumber);

// 同步状态到ref，确保ref始终持有最新值
useEffect(() => {
  currentPageRef.current = currentPageNumber;
}, [currentPageNumber]);

const fetchMoreItems = useCallback(page => {
  const { from, to } = dateModifier(selectedMonth);
  const params = { from, to, limit: ITEMS_PER_PAGE, page: 3 };
  console.log('inside', currentPageRef.current); // 现在能拿到最新的currentPageNumber
  if (selectedTab[ISSUES]) dispatchUserSuggestions({ ...params, type: 'issue' });
  if (selectedTab[SUGGESTIONS]) dispatchUserSuggestions({ ...params, type: 'suggestion' });
}, [dispatchUserSuggestions, selectedTab, selectedMonth]);

这样既不需要把currentPageNumber加入useCallback的依赖数组，又能在函数内部拿到最新状态值，完美打破循环。

方案2：检查并优化page参数的使用（如果逻辑允许）

我注意到你的代码里fetchMoreItems接收了page参数，但实际在params里写死了page:3。如果这个page本来应该对应currentPageNumber，那你可以直接使用传入的page参数，或者调整逻辑让page和currentPageNumber保持一致，这样就不需要在函数内部读取currentPageNumber了：

const fetchMoreItems = useCallback(page => {
  const { from, to } = dateModifier(selectedMonth);
  // 用传入的page代替硬编码的3，确保page是最新的页码值
  const params = { from, to, limit: ITEMS_PER_PAGE, page };
  console.log('inside', page); // 直接使用传入的最新page值
  if (selectedTab[ISSUES]) dispatchUserSuggestions({ ...params, type: 'issue' });
  if (selectedTab[SUGGESTIONS]) dispatchUserSuggestions({ ...params, type: 'suggestion' });
}, [dispatchUserSuggestions, selectedTab, selectedMonth]);

方案3：用useReducer管理状态（适合复杂状态场景）

如果你的状态更新逻辑比较复杂，useReducer是更好的选择——它的dispatch函数是稳定的，不会随着状态变化而重新生成，这样你就可以把dispatch加入useCallback的依赖，而不需要依赖具体的状态值：

// 先定义reducer处理状态更新
function pageReducer(state, action) {
  switch (action.type) {
    case 'SET_PAGE':
      return { ...state, currentPageNumber: action.payload };
    // 可添加其他状态更新类型
    default:
      return state;
  }
}

// 在组件中使用useReducer
const [state, dispatch] = useReducer(pageReducer, { currentPageNumber: 0 });

const fetchMoreItems = useCallback(page => {
  const { from, to } = dateModifier(selectedMonth);
  const params = { from, to, limit: ITEMS_PER_PAGE, page: 3 };
  console.log('inside', state.currentPageNumber); // 现在能拿到最新状态值
  // ...其他逻辑
  // 如果需要更新页码，通过dispatch触发
  dispatch({ type: 'SET_PAGE', payload: newPageNumber });
}, [dispatch, selectedTab, selectedMonth]);

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