React useEffect hook loop，依赖问题

Question

效果以无限的重新渲染循环结束，它不断向 url 发出请求。基本上我所拥有的是获取国家/地区的 API 调用。然后基于过滤器输入，它呈现与搜索匹配的国家。如果只有一个结果，还应该获取并显示首都的天气信息。

我想重新渲染天气的唯一时间是国家/地区的值发生变化时。不知怎的，我无法让它工作..

let filtered = countries.filter(country => country.name.toUpperCase().includes(filter.toUpperCase()))

const [weather, setWeather] = useState([])

useEffect(() => {
  if (filtered.length === 1) {
    const country = filtered[0]
    const api_key = process.env.REACT_APP_API_KEY
    const url = `http://api.weatherstack.com/current?access_key=${api_key}&query=${country.capital}`
    axios.get(url)
      .then(response => {
        setWeather(response.data.current)
      })
  }

}, [filtered])

Answer 1

每当渲染组件时，都会重新创建filtered（依赖项），这意味着调用useEffect，使API全部设置状态，并导致重新渲染，重新创建filtered...

为防止这种情况发生，请将filtered 表达式与useMemo 包装起来。 useMemo 块应该依赖于 countries 和 filter。只要countries 或filter 不更改filtered 将保持不变，防止循环。如果其中之一发生变化，filtered 将发生变化，useEffect 将使用新数据再次调用 API。

let filtered = useMemo(() => countries.filter(country =>
  country.name.toUpperCase().includes(filter.toUpperCase()),
[countries, filter])

另一种选择是使用Array.find() 代替过滤器，并使useEffect() 依赖于找到的国家/地区：

const country = useMemo(() => countries.find(country =>
  country.name.toUpperCase().includes(filter.toUpperCase())
), [countries, filter])

const [weather, setWeather] = useState([])

useEffect(() => {
  if (country) {
    const api_key = process.env.REACT_APP_API_KEY
    const url = `http://api.weatherstack.com/current?access_key=${api_key}&query=${country.capital}`
    axios.get(url)
      .then(response => {
        setWeather(response.data.current)
      })
  }

}, [country])