Как убрать предупреждение?

Question

[Res1dentEvil]

Подскажите плз, как убрать предупреждение?



Использую useEffect

useEffect(() => {
        getTodo()
    }, [getTodo])

и функцию getTodo

const getTodo = useCallback(async () => {
        try {
                await axios.get('/api/todo', {
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    params: {userId}
                })
                    .then((response) => {
                        setTodos(response.data)
                    })
        } catch (error) {
            console.log(error)
        }
    }, [userId, setTodos])

Есть, вроде как, решение похожей ситуации. https://habr.com/ru/post/493496/
Но, видимо, я делаю что-то не так, потому убрать ошибку так и не смог.

Answer 1

[Nikolay Matyushkin]

Самое главное забыли из примера добавить - функцию очистки. Вам же ошибка об этом и говорит. Очистить useEffect перед размонтированием компонента.

в свой useEffect в самом начале опишите переменную, и присвойте значение false
let cleanupFunction = false;

а в самом конце добавьте возврат колбэка, этот колбэк сработает перед тем, как размонтируется компонент.
return () => cleanupFunction = true;

Comments

[Res1dentEvil]

имеете ввиду вот так?

useEffect(() => {
        let cleanupFunction = false;
        getTodo()
        return () => cleanupFunction = true;
    }, [getTodo])

Не работает - 'cleanupFunction' is assigned a value but never used.
Или я не так понял(

Answer 2

[Ivan Ivanovich]

useEffect(() => {
  let stopGettingAfterUnmount = false;

  const getTodo = async () => {
    await axios
      .get("/api/todo", {
        headers: {
          "Content-Type": "application/json",
        },
        params: { userId },
      })
      .then((response) => {
        if (stopGettingAfterUnmount) return;

        setTodos(response.data);
      });
  };

  getTodo();

  return () => {
    stopGettingAfterUnmount = true;
  };
}, [userId]);