无法对未安装的组件主题提供程序执行 React 状态更新

Question

我需要帮助，因为我收到以下错误：警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。在 createCategory 中（在 themeProvider.js:39）

/* Imports */

    import React, { useContext, useState, useEffect } from 'react';

    import AsyncStorage from '@react-native-community/async-storage';

    import THEMES from '@app/theme/themes.json';

    /* /Imports/ */

    const STORAGE_KEY = 'THEME_ID';

    const ThemeContext = React.createContext();

    /* Exports */

    export const ThemeContextProvider = ({ children }) => {

      const [themeID, setThemeID] = useState();

      useEffect(() => {

        (async () => {

          const storedThemeID = await AsyncStorage.getItem(STORAGE_KEY);

          if (storedThemeID) setThemeID(storedThemeID);

          else setThemeID(THEMES[1].key);

        })();

      }, []);

      return (

        <ThemeContext.Provider value={{ themeID, setThemeID }}>

          {!!themeID ? children : null}

        </ThemeContext.Provider>

      );

    };

    export function withTheme(Component) {

      function TargetComponent(props) {

        const { themeID, setThemeID } = useContext(ThemeContext);

        const getTheme = themeID => THEMES.find(theme => theme.key === themeID);

        const setTheme = themeID => {

          AsyncStorage.setItem(STORAGE_KEY, themeID);

          setThemeID(themeID);

        };

        return (

          <Component

            {...props}

            themes={THEMES}

            theme={getTheme(themeID)}

            setTheme={setTheme}

          />

        );

      }

      TargetComponent.navigationOptions = Component.navigationOptions;

      return TargetComponent;

      }

    /* /Exports/ */

Answer 1

如果您还不知道 - 您可以在 useEffect 钩子的末尾返回一个函数。每当该效果再次触发时（例如，当其依赖项的值发生变化时），以及在组件卸载之前，都会调用该函数。所以如果你有一个像这样的 useEffect 钩子：useEffect(() => {&nbsp; // logic here&nbsp; return () => {&nbsp; &nbsp; // clean up&nbsp; };}, []); // no dependencies!相当于：class SomeComponent extends React.Component {&nbsp; componentDidMount() {&nbsp; &nbsp; // logic here&nbsp; }&nbsp; componentWillUnmount() {&nbsp; &nbsp; // clean up&nbsp; }}所以在你的代码中我会添加这个：useEffect(() => {&nbsp; let isCancelled = false;&nbsp; const fetchData = async () => {&nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; // fetch logic omitted...&nbsp; &nbsp; &nbsp; const data = await AsyncStorage.getItem(STORAGE_KEY);&nbsp; &nbsp; &nbsp; if (storedThemeID) setThemeID(storedThemeID);&nbsp; &nbsp; &nbsp; else setThemeID(THEMES[1].key);&nbsp; &nbsp; } catch (e) {&nbsp; &nbsp; &nbsp; throw new Error(e)&nbsp; &nbsp; }&nbsp; };&nbsp; fetchData();&nbsp; return () => {&nbsp; &nbsp; isCancelled = true;&nbsp; };}, [themeID]);

Answer 2

试试这个let unmounted = false;useEffect(() => {&nbsp; &nbsp; (async () => {&nbsp; &nbsp; &nbsp; &nbsp; const storedThemeID = await AsyncStorage.getItem(STORAGE_KEY);&nbsp; &nbsp; &nbsp; &nbsp; if (!unmounted) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (storedThemeID) setThemeID(storedThemeID);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else setThemeID(THEMES[1].key);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })();&nbsp; &nbsp; return () => {&nbsp; &nbsp; &nbsp; &nbsp; unmounted = true;&nbsp; &nbsp; };}, []);