Как очистить функцию в вызове useffect?

Question

Итак, я обновляю состояние в хуке useEffect и получаю эту ошибку. Я не знаю, как использовать функцию очистки, если мы используем синтаксис async / await в хуках useEffect.

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

  const getToken = async () => {
    const mytoken = await AsyncStorage.getItem("fb_token");
    if (mytoken) {
      navigation.navigate("Main", { screen: "Map" });
      setToken(mytoken);
    } else {
      setToken(false);
    }
  };
    getToken();

  }, [navigation]);```

How to update state and use clean up function should i declare this function outside hook but if i do that how would i use that function as a clean up?

Answer 1

Вы можете получить обратный вызов, когда компонент размонтируется или повторно монтируется в результате изменения одной из useEffect зависимостей, путем возврата функции из useEffect. Вы можете использовать это, чтобы установить флаг, чтобы знать, что что-то изменилось. См. *** комментарии:

useEffect(() => {
    let cancelled = false; // *** A flag to let us know this is cancelled

    const getToken = async () => {
        const mytoken = await AsyncStorage.getItem("fb_token");
        if (!cancelled) { // *** Check the flag
            if (mytoken) {
                navigation.navigate("Main", { screen: "Map" });
                setToken(mytoken);
            } else {
                setToken(false);
            }
        }
    };
    getToken().catch(error => {                 // ***
        // Handle/report error here...          // *** Handle errors from the async function
    });                                         // ***

    // *** A callback to let us know to set the flag
    return () => {
        cancelled = true;
    };
}, [navigation]);

(Вы также нарушаете одно из правил обещаний, помеченных выше: Всегда либо обрабатывать ошибки, либо передавать цепочку обещаний чему-то, что будет.)

Обратите внимание, что, как я уже упоминал ранее, установка токена будет пропущена в двух ситуациях:

1. Компонент отключен (тот что вызывало проблемы)

2. navigation изменено