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])