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 use效应缺少依赖项：'Id'。要么包含它，要么删除依赖数组）

Answer 1

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

要解决此问题，您需要在依赖项数组中提供get（）方法，警告状态如下：

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

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

这将告诉钩子，如果get（）方法发生更改，钩子应该预期不同的行为。在您的情况下，它实际上没有任何足够的影响，但在其他情况下，它可以作为一个函数，在每次变量更改时运行。