亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

無法對未安裝的組件主題提供程序執行 React 狀態更新

無法對未安裝的組件主題提供程序執行 React 狀態更新

肥皂起泡泡 2022-01-01 20:53:15
我需要幫助,因為我收到以下錯誤:警告:無法對未安裝的組件執行 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/ */
查看完整描述

2 回答

?
元芳怎么了

TA貢獻1798條經驗 獲得超7個贊

如果您還不知道 - 您可以在 useEffect 鉤子的末尾返回一個函數。每當該效果再次觸發時(例如,當其依賴項的值發生變化時),以及在組件卸載之前,都會調用該函數。所以如果你有一個像這樣的 useEffect 鉤子:


useEffect(() => {

  // logic here


  return () => {

    // clean up

  };

}, []); // no dependencies!

相當于:


class SomeComponent extends React.Component {

  componentDidMount() {

    // logic here

  }


  componentWillUnmount() {

    // clean up

  }

}

所以在你的代碼中我會添加這個:


useEffect(() => {

  let isCancelled = false;

  const fetchData = async () => {

    try {

      // fetch logic omitted...

      const data = await AsyncStorage.getItem(STORAGE_KEY);


      if (storedThemeID) setThemeID(storedThemeID);

      else setThemeID(THEMES[1].key);

    } catch (e) {

      throw new Error(e)

    }

  };


  fetchData();


  return () => {

    isCancelled = true;

  };

}, [themeID]);


查看完整回答
反對 回復 2022-01-01
?
慕村225694

TA貢獻1880條經驗 獲得超4個贊

試試這個


let unmounted = false;


useEffect(() => {

    (async () => {

        const storedThemeID = await AsyncStorage.getItem(STORAGE_KEY);

        if (!unmounted) {

            if (storedThemeID) setThemeID(storedThemeID);

            else setThemeID(THEMES[1].key);

        }

    })();

    return () => {

        unmounted = true;

    };

}, []);


查看完整回答
反對 回復 2022-01-01
  • 2 回答
  • 0 關注
  • 237 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號