React Hook useEffect 缺少依賴項警告

Question

在 React 應用程序中，我在 useEffect function 中的一些組件上收到此警告。 我已經看到了其他 SO 問題，但仍然看不到修復。

React Hook useEffect 缺少一個依賴項：'loadItems'。 包括它或刪除依賴數組

import React, { useState, useEffect } from "react";

import Button from "./common/button";
import { splitArray } from "../utility/chunkify";

const BudgetTypesList = ({ types, onDelete, onEdit }) => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    loadItems();
  }, [types]);

  const loadItems = () => {
    const size = Math.ceil(types.length / 2);
    const chunks = splitArray(types, size);
    setItems(chunks);
  };

   .... rest of code here

Answer 1

UseEffect建議將所有function/values聲明為依賴項。

import React, { useState, useEffect } from "react";

import Button from "./common/button";
import { splitArray } from "../utility/chunkify";

const BudgetTypesList = ({ types, onDelete, onEdit }) => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    const loadItems = () => { //<---move this function inside useEffect
      const size = Math.ceil(types.length / 2);
      const chunks = splitArray(types, size);
      setItems(chunks);
    };
    loadItems();
  // you can use this to `disable comment` any such unnecessary warnings
  // eslint-disable-next-line 
  }, [types]); //<--- It will also show it for setItems now,

  

   .... rest of code here