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

How do I solve this warning?

Answer 1

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

Answer 2

As per the warning suggested solution, include url in the dependency array.

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

Alternatively, you might disable the warning (but not recommended):

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