为什么我的获取请求会导致使用 React Toast 通知的 ReactJs 中的无限错误循环

Question

每次我在获取中发现错误时，我都想收到一个 toast 通知 function.I 我在 return 之前的组件内使用一个循环来使用 accuweather api。

这是我的处理错误函数：

export const handleErrors = (response) => {
if (!response.ok) {
    return Promise.reject(response.statusText);
}
return response;}

这是我获取数据的组件：

import { useToasts } from 'react-toast-notifications';
import handleErrors from '../../handleErrors.js';

const mapStateToProps = state => ({
favorites:state.favorites.favorites})

export const Favorites = (props) => {

const { addToast } = useToasts();
let data = null;

props.favorites.map((city,i) => {
fetch(`http://dataservice.accuweather.com/currentconditions/v1/${city.CityKey}?apikey=${apiKey}`)
 .then(handleErrors)
 .then(response => response.json())
 .then(res => {data = [...data,res[0]];console.log(data)})
 .catch(error => addToast(error.message, { appearance: 'error' }))
});

return(
  <div>
    {data === null ? null : data.map((city,i => {
      return(<FavoriteTile
              city={city}
              key={i}/>
            )
  </div>
)
}

现在，当我尝试加载组件页面时，我遇到无限吐司错误并且页面崩溃。

Answer 1

你运行你的 "fetch code" 在哪里？我相信它应该在 useEffect (componentDidMount) 内的某处，否则当组件重新呈现时它一直是运行。

Answer 2

如果您使用的是函数式组件，只需使用 useEffect 包装您的获取函数。

现在发生的事情是，每次您从中获取某些内容时，api 您的 toast 正在更新，因此组件正在重新呈现并在无限循环中再次调用 fetch。

useEffect(() => {
  props.favorites.map((city,i) => {
    fetch(`http://dataservice.accuweather.com/currentconditions/v1/${city.CityKey}? 
    apikey=${apiKey}`)
    .then(handleErrors)
    .then(response => response.json())
    .then(res => {data = [...data,res[0]];console.log(data)})
    .catch(error => addToast(error.message, { appearance: 'error' }))
  });
}, [])

为什么我的获取请求会导致使用 React Toast 通知的 ReactJs 中的无限错误循环

Why do my fetch request causes an infinite error loop in ReactJs using React Toast Notifications

javascript

error-handling

fetch

toast

reactjs