React项目使用react-paginate时currentPage不更新无法翻页如何解决

安全阿岳

2026-10-3

问题原因及修复方案

你现在的代码有两处错误导致分页不生效：

useEffect依赖项不全
你当前的useEffect只把dispatch作为依赖，currentPage变化时不会重新触发拉取新页数据的逻辑，需要把currentPage加到依赖数组里。
action函数参数定义错误
redux thunk的异步action函数，第一个是你主动传入的参数，后面的dispatch、getState是thunk中间件自动注入的参数，你现在把currentPage写在了dispatch后面，永远拿不到正确的页码值。

具体修改代码

1. 修复HomeScreen组件的useEffect

// 修改前
useEffect(() => {
  dispatch(listProducts(currentPage));
  console.log(currentPage);
}, [dispatch]);

// 修改后
useEffect(() => {
  dispatch(listProducts(currentPage));
  console.log(currentPage);
}, [dispatch, currentPage]); // 加入currentPage作为依赖

2. 修复listProducts action的参数定义

// 修改前
export const listProducts = () => async (dispatch, currentPage) => {
  // 原有逻辑
}

// 修改后
export const listProducts = (currentPage) => async (dispatch) => {
  dispatch({
    type: PRODUCT_LIST_REQUEST,
  });
  try {
    const { data } = await Axios.get(`http://localhost:3000/items?_page=${currentPage}&_limit=16`);
    dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
  } catch (error) {
    dispatch({ type: PRODUCT_LIST_FAIL, payload: error.message });
  }
};