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

Question

我收到此错误（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'。包含它或删除依赖项数组）

Answer 1

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

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

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

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

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