Как исправить, отменить все подписки и асинхронные задачи при ошибке функции очистки useEffect

#javascript #react-native #react-hooks #expo

Вопрос:

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

 useEffect(() =gt; {  const unsubscribe = streamCourses({  next: (querySnapshot) =gt; {  const task = querySnapshot.docs.map((docSnapshot) =gt;   mapDocTask(docSnapshot)  );  setCourseDetails(task);  },  error: (error) =gt; console.log(error),  });  return unsubscribe;  }, [setCourseDetails]);

1. ПРИВЕТ, пожалуйста, укажите некоторые детали сценария, с которым вы сталкиваетесь. Это поможет нам понять ваш вопрос

2. Почему там setCourseDetails есть «там»? И что он делает?

Ответ №1:

У меня была похожая проблема с этим. Чтобы решить эту проблему, мне нужно было сделать две вещи:

(1) Я создал State логическое isMounted значение, которое было установлено true по умолчанию и использовалось для обертывания содержимого моего useEffect s, чтобы содержимое моего useEffect s запускалось только в том случае, если экран был mounted .

(2) Я создал useEffect специальную программу, предназначенную исключительно для очистки. Это означало useEffect , что в нем не было ничего, кроме return инструкции, которая устанавливала различные State переменные, которые у меня были, в значения по умолчанию.

Пример:

 useEffect(() =gt; {  if (isMounted) {  const unsubscribe = streamCourses({  next: (querySnapshot) =gt; {  const task = querySnapshot.docs.map((docSnapshot) =gt;   mapDocTask(docSnapshot)  );  setCourseDetails(task);  },  error: (error) =gt; console.log(error),  });  return unsubscribe;  }  }, [setCourseDetails]);  useEffect(() =gt; {  return () =gt; {  setCourseDetails(null);  setIsMounted(false);  } }, []);