React Hook useEffect有一个缺失的依赖项："url"。要么包含它，要么删除依赖数组 react-hooks/exhaustive-deps

Question

useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data[0]))
.catch(err => console.warn(err))
}, [cityKey])

如何解决此警告？

Answer 1

useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data[0]))
.catch(err => console.warn(err))
}, [cityKey,url])

Answer 2

根据警告建议的解决方案，在依赖数组中包含url。

useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data[0]))
.catch(err => console.warn(err))
}, [cityKey, url])

或者，您可以禁用警告(但不推荐(：

useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data[0]))
.catch(err => console.warn(err))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [cityKey])