React Hook useEffect存在缺失依赖问题，求解决方案

核心问题分析 #

警告提示useEffect中用到了onPaginationChange和showPerPage但未加入依赖数组，React的exhaustive-dep规则要求所有在effect内部用到的外部变量都要加入依赖数组，避免闭包导致的旧值引用问题。同时你的代码还有两个隐藏问题：totalPage用useState初始化后不会随total或showPerPage变化更新，changePage函数直接依赖currentPage存在闭包风险。

分步解决方法 #

1. 补全useEffect的依赖数组

直接把showPerPage和onPaginationChange加入依赖数组，这是最直接满足规则的做法：

useEffect(() => {
  const value = showPerPage * currentPage;
  onPaginationChange(value - showPerPage, value);
}, [currentPage, showPerPage, onPaginationChange]);

2. 避免onPaginationChange频繁触发effect

如果父组件中onPaginationChange是普通函数（每次渲染都会生成新函数），会导致useEffect在父组件渲染时也触发。解决方法是在父组件中用useCallback包裹这个函数：

// 父组件中的代码示例
import { useCallback } from 'react';

const ParentComponent = () => {
  const handlePaginationChange = useCallback((start, end) => {
    // 你的分页逻辑
  }, []); // 根据实际需求添加依赖，比如如果用到state就加进去

  return <PaginationRaw onPaginationChange={handlePaginationChange} ... />;
};

3. 修复totalPage的动态更新问题

当前totalPage用useState初始化，当total或showPerPage变化时不会自动更新，换成useMemo计算：

import { useMemo } from 'react';

// 替换原来的const [totalPage] = useState(...)
const totalPage = useMemo(() => {
  return Math.ceil(total / showPerPage);
}, [total, showPerPage]);

4. 优化changePage函数的闭包问题

changePage中直接使用currentPage，当currentPage更新后，函数内部的currentPage还是旧值（闭包问题），改用函数式更新：

const changePage = (type) => {
  window.scrollTo({ top: 0 });
  if (type === "prev") {
    // 函数式更新避免闭包问题
    setCounter(prevPage => prevPage - 1);
  } else if (type === "next") {
    setCounter(prevPage => prevPage + 1);
  }
};

修改后的完整代码 #

import React, { useEffect, useState, useMemo } from "react";
import PaginationCSS from "./pagination.module.css";
import { PreviousButton, NextButton } from "./button";

const PaginationRaw = ({ showPerPage, onPaginationChange, total }) => {
  const [currentPage, setCounter] = useState(1);
  
  // 用useMemo动态计算总页数
  const totalPage = useMemo(() => {
    return Math.ceil(total / showPerPage);
  }, [total, showPerPage]);

  useEffect(() => {
    const value = showPerPage * currentPage;
    onPaginationChange(value - showPerPage, value);
  }, [currentPage, showPerPage, onPaginationChange]);

  const changePage = (type) => {
    window.scrollTo({ top: 0 });
    if (type === "prev") {
      // 函数式更新避免闭包问题
      setCounter(prevPage => prevPage - 1);
    } else if (type === "next") {
      setCounter(prevPage => prevPage + 1);
    }
  };

  return (
    <>
      <div className={PaginationCSS["pagination-container"]}>
        <PreviousButton currentPage={currentPage} changePage={changePage} />
        <ul className={PaginationCSS["pagination-list"]}>
          {new Array(totalPage).fill("").map((element, index) => (
            <li
              key={index + 1}
              className={PaginationCSS["pagination-page-item"]}
            >
              <a
                onClick={() => setCounter(index + 1)}
                href="# "
                className={
                  index + 1 === currentPage
                    ? `${PaginationCSS["pagination-page-activeLink"]}`
                    : `${PaginationCSS["pagination-page-link"]}`
                }
              >
                {index + 1}
              </a>
            </li>
          ))}
        </ul>
        <NextButton
          currentPage={currentPage}
          changePage={changePage}
          totalPage={totalPage}
        ></NextButton>
      </div>
    </>
  );
};

export default PaginationRaw;

额外说明 #

• 不要直接忽略警告（比如用// eslint-disable-next-line react-hooks/exhaustive-dep），除非你明确知道闭包不会导致问题，否则会埋下潜在bug。
• 函数式更新不仅能解决闭包问题，还能让代码更健壮，尤其是在频繁更新状态的场景下。

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