我收到此错误(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'。要么包含它,要么删除依赖项数组)
答案 0 :(得分:1)
useEffect
和其他一些钩子需要提供一个依赖数组。这是作为数组传递的最后一个参数。依赖项告诉钩子要观察哪些变量或元素的变化。如果依赖项发生变化,钩子也应该期待一个新的行为并因此更新。
要解决您的问题,您需要在依赖项数组中提供 get()
方法,如警告所示:
const get = useCallback(async () => {
const res = await fetch(
URL +
Id
);
const response = await res.json();
setSport(response);
}, []);
useEffect(() => {
get();
}, [get]);
这将告诉钩子,如果 get()
方法发生变化,它应该期待不同的行为。它在您的情况下并没有真正产生足够的影响,但在其他情况下它可以用作每次变量更改时运行的函数。