我有一個ReactHookuseEffect缺少依賴項：-有解無憂

問題可能出在控制臺吐出的 useEffect 上

src\components\Pagination\PaginaionRaw.jsx 第 14:6 行：React Hook useEffect 缺少依賴項：“onPaginationChange”和“showPerPage”。要么包含它們，要么洗掉依賴陣列。如果“onPaginationChange”更改過于頻繁，請找到定義它的父組件并將該定義包裝在 useCallback react-hooks/exhaustive-dep 中

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

const PaginationRaw = ({ showPerPage, onPaginationChange, total }) => {
  const [currentPage, setCounter] = useState(1);
  const [totalPage] = useState(Math.ceil(total / showPerPage));
   

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

  const changePage = (type) => {
    //code
    window.scrollTo({ top: 0 });
    if (type === "prev") {
      setCounter(currentPage - 1);
    } else if (type === "next") {
      setCounter(currentPage   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;

uj5u.com熱心網友回復：

您應該將 onPaginationChange 和 showPerPage 插入到 useEffect 依賴項陣列中（就在 currentPage 之后）。它是必需的，因為它們來自組件道具，因此如果這些道具將被更改，鉤子將被重新定義。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/516334.html

標籤：javascripthtml反应

上一篇：帶有十字圖示的容器

下一篇：如何移動divonkeypressHTMLCSSJavascript