React Hook useEffect 缺少依赖项警告答案

【问题标题】：React Hook useEffect has a missing dependency warningReact Hook useEffect 缺少依赖项警告
【发布时间】：2021-12-03 12:58:26
【问题描述】：

在 React 应用程序中，我在 useEffect 函数中的一些组件上收到此警告。我已经看到其他 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

【问题讨论】：

标签： reactjs

【解决方案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

【讨论】：