Reactjs React Hook useEffect缺少依赖项。包括它或删除依赖项数组react hooks/dep

如果我像它告诉我的那样在dependecy数组中添加dependency数组“fitems”，那么它会导致无限循环。另外，如果我没有在阵列上使用spread运算符，则警告不会显示，但状态更改不会重新引发

侧边栏.tsx

import { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import axios from "axios";
import getItems from "./../services/SidebarItems";
import { sidebarInfoUrl } from "./../services/ApiLinks";

function Sidebar() {
  const fItems = getItems();
  const location = useLocation();
  const paths = location.pathname.split("/");
  const [items, setItems] = useState(fItems);

  useEffect(() => {
    axios.get(sidebarInfoUrl).then((response) => {
      const updatedItems = [...fItems]
      updatedItems.forEach((item) => {
        if (item.match === "projects") item.value = response.data.projects;
        else if (item.match === "contacts") item.value = response.data.contacts;
      });
      setItems(updatedItems);
      console.log("here")
    });
  }, []);

  return (
    <div className="sidebar shadow">
      {items &&
        items.map((item) => (
          <Link
            key={item.match}
            to={item.link}
            className={
              paths[2] === item.match ? "sidebar-item active" : "sidebar-item"
            }
          >
            <span>
              <i className={item.icon}></i> {item.title}
            </span>
            {item.value && <div className="pill">{item.value}</div>}
          </Link>
        ))}
    </div>
  );
}

export default Sidebar;

---

感谢AKX。我发现了我的问题。我必须使用

useMemo

Hook，这样当我将getItem（）函数添加到依赖项数组中时，它就不会引起infinte循环

const fItems = useMemo(() => {
    return getItems();
  }, []);

而不是

const fItems = getItems();

另一个修正是，

---

如果我不将SidebarItems.ts中的项目作为函数发送，而是作为数组发送，那么即使我不使用

useMemo

hook，它也不会导致infinte循环。

什么是

getItems（）

？你将得到一个无限循环，它作为一个依赖项，因为它总是返回一个新对象。我已经添加了这个部分。它只是sidebarThanks bro的一个初始值数组。我解决了我的问题。只需在

usemo

hook中使用该函数，因为它是一个静态数组，所以根本不需要函数来获取它。是的。我发现不使用数组作为函数也解决了没有

usemo

hook的问题。非常感谢兄弟。

const fItems = getItems();