Задать вопрос
  • Как правильно отправить асинхронный запрос в useEffect?

    @twolegs
    В вашем случае нужно избежать апдейта стейта если компонент был размонтирован. Самое верное, на мой взгляд, решение - это отмена запроса при размонтировании. Пример с fetch, т.к. не знаю, есть ли возможность отменить запрос в axios.
    useEffect(() => {
        const abortController = new AbortController();
        const fetchData = async () => {
          await fetch(url, { abortController }).then((data: any) => {
            setImg(data);
            setPreloader(!preloader);
          });
        };
        fetchData();
    
        return () => {
          abortController.abort(); 
        }
      }, [url]);


    Если рассмотреть пример выше, теоретически должно сработать такое:
    useEffect(() => {
      let isMounted = true; 
      const fetchData = async () => {
       ...
        if (isMounted) {
          setImg(data);
          setPreloader(!preloader);
        }
       ...
      }
      ...
      return () => { isMounted = false; };
    }, [])
    Ответ написан
    Комментировать