React Hook useCallback 缺少依赖项：'Id'。包括它或删除依赖数组[重复]

Posted 2023-02-21

【中文标题】React Hook useCallback 缺少依赖项：\'Id\'。包括它或删除依赖数组[重复]

【英文标题】：React Hook useCallback has a missing dependency: 'Id'. Either include it or remove the dependency array [duplicate]React Hook useCallback 缺少依赖项：'Id'。包括它或删除依赖数组[重复]

【发布时间】：2021-08-26 07:07:55

【问题描述】：

我收到此错误（React Hook useCallback 缺少依赖项：'Id'。包含它或删除依赖项数组）并且不知道如何解决它，

import React,  useEffect, useState, useCallback  from "react";
import  Link  from "react-router-dom";

const Sports = (props) => 
  const Id = props.match.params.gamename;
  // console.log(Id);
  const [sport, setSport] = useState([]);
  const get = useCallback(async () => 
    const res = await fetch(
      URL +
        Id
    );
    const response = await res.json();
    setSport(response);
    // console.log(response);
  , [sport]);
  useEffect(() => 
    get();
  , [get]);

  return (
    <div>
      <ul>
        sport.map((currentElement, index) => 
          return (
            <li key=index>
              <Link to="/" + Id + "/" + currentElement.competition.id>
                <p>currentElement.competition.name</p>
              </Link>
            </li>
          );
        )
      </ul>
    </div>
  );
;

export default Sports;

我这样做是为了……！

import React,  useEffect, useState  from "react";
import  Link  from "react-router-dom";

const Sports = (props) => 
  const Id = props.match.params.gamename;
  // console.log(Id);
  const [sport, setSport] = useState([]);

  useEffect(() => 
    const get = async () => 
      const res = await fetch(
        "http://51.143.173.5/api/developer/matchapi.php?Action=listCompetitions&EventTypeID=" +
          Id
      );
      const response = await res.json();
      setSport(response);
      // console.log(response);
    ;
    get();
  , []);
  return (
    <div>
      <ul>
        sport.map((currentElement, index) => 
          return (
            <li key=index>
              <Link to="/" + Id + "/" + currentElement.competition.id>
                <p>currentElement.competition.name</p>
              </Link>
            </li>
          );
        )
      </ul>
    </div>
  );
;

export default Sports;

出现此错误 - （React Hook useEffect 缺少依赖项：'Id'。包含它或删除依赖项数组）

【问题讨论】：

如果id 属性发生变化，您是否希望get 再次运行？

【参考方案1】：

useEffect 和其他一些钩子需要提供一个依赖数组。这是作为数组传递的最后一个参数。依赖项告诉钩子要观察哪些变量或元素的变化。如果依赖项发生了变化，钩子也应该期待一个新的行为并因此更新。

要解决您的问题，您需要在依赖项数组中提供 get() 方法，因为警告状态如下：

const get = useCallback(async () => 
  const res = await fetch(
    URL +
      Id
  );
  const response = await res.json();
  setSport(response);
, []);

useEffect(() => 
  get();
, [get]);

这将告诉钩子，如果 get() 方法应该改变，它应该期待不同的行为。它对您的情况并没有任何足够的影响，但在其他情况下，它可以用作每次变量更改时运行的函数。

【讨论】：

不，因为get是在组件内部定义的，所以每次重新渲染时都会是一个新的，导致无限循环。

无论如何它仍然依赖于方法。如果他想防止每次重新渲染，他应该将get() 方法包装在React.useCallback

现在我得到了这个错误 - （'get'函数使useEffect Hook（在第19行）的依赖关系在每次渲染时都会发生变化。将它移动到useEffect回调中。或者，包装定义'get' 在它自己的 useCallback() Hook ) @Phoenix

@persiussingh 我编辑了我的答案以使用 useCallback

另一种可能的解决方案是将get() 的功能完全移动到useEffect 中。除非需要再次使用get() 方法，否则不需要将其包装在函数中。