Не удается выполнить обновление состояния React для неустановленного компонента с хуком useEffect.

Question

У меня есть

useEffect(() => {
        setLoading(true);
        axios
            .get(url, {params})
            .then(data => {
                setData(data || []);
                setLoading(false);
            })
            .catch(() => {
                showToast('Load data failed!', 'error');
                setLoading(false);
            });

    }, [params]);

Это дает мне

Предупреждение. Невозможно выполнить обновление состояния React на отключенном компоненте. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect.

Хорошо, вопрос НЕ КАК РЕШИТЬ ЭТО. Когда я использую setLoading (false) после обещания axios, он работает нормально, но внутри обещания (например, выше) он всегда дает мне предупреждение. На самом деле я хочу знать, почему так происходит? Есть ли кто-нибудь, кто мог бы объяснить мне в двух словах поток кода выше (процесс, как код выше работает с предупреждением) и, возможно, дать некоторые рекомендации по использованию хуков.

Answer 1

вам нужна функция очистки. это означает, что вы должны вызвать функцию end из функции useEffect. когда Зависимость cie - это изменения (параметры в вашем примере) вызывает эту функцию. поэтому мы сможем контролировать, когда компонент монтирует / размонтирует

useEffect(() => {
  let cancelled = false;
  setLoading(false);
  async function fetchData() {
    try {
      const response = await axios.get(url, { params });
      if (!cancelled) {
        setData(response.data);
        setLoading(false);
      }
    } catch (e) {
      if (!cancelled) {
        showToast(e.message, "error");
        setLoading(false);
      }
    }
  }
  fetchData();
  // clean up here
  return () => {
    cancelled = true;
  };
}, [params]);

ПОЧЕМУ ЭТО ПРОИСХОДИТ ТАК?

Представьте, что ваш запрос идет медленно, и компонент уже размонтирован при асинхронности c запрос завершен. на этот раз выдает это предупреждение