React native 反应本机内存泄漏反应导航

我想检查用户是否在useEffect中有安全令牌，但我收到了此错误消息

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.

当我使用useEffect时会发生这种情况。如果删除它，则不会收到错误消息，但我需要检查用户是否拥有令牌

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import getSecureKey from '../utilies/getSecureKey';

const Stack = createStackNavigator();

const AppStack = ({ navigation }) => {

  useEffect(() => {
    getSecureKey().then(res => console.log(res)).catch(e => console.log(e));
  }, []);

  return (
    <Stack.Navigator showIcon={true} initialRouteName="AppTabs">
      <Stack.Screen name="AppTabs" component={AppTabs} options={{headerTitle: () => <Header />, headerStyle: {
        backgroundColor: '#fff'
      }}} />

 .....

App.js

import React, { useState, useEffect } from 'react';
import * as Font from 'expo-font';
import { NavigationContainer } from '@react-navigation/native';
import AppLoading from 'expo-app-loading';
import { Provider } from 'react-redux';
import store from './src/redux/store/index';
import AppStack from './src/navigation/stack';

const getFonts = async () => {
  await Font.loadAsync({
    "nunito-regular": require("./assets/fonts/Nunito-Regular.ttf"),
    "nunito-bold": require("./assets/fonts/Nunito-Bold.ttf"),
  });
};

const App = () => {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  if(fontsLoaded) {
  return (
    <Provider store={store}>
      <NavigationContainer><AppStack /></NavigationContainer>
    </Provider>)
  } else {
    return (<AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} onError={() => {}} />)
  }
};

export default App;

import React，{useState，useffect}来自“React”；
从“expo字体”导入*作为字体；
从'@react-navigation/native'导入{NavigationContainer}；
从“expo应用程序加载”导入应用程序加载；
从'react redux'导入{Provider}；
从“./src/redux/store/index”导入存储；
从“./src/navigation/stack”导入AppStack；
const getFonts=async（）=>{
等待Font.loadAsync({
“nunito-regular”：要求（“./assets/font/nunito-regular.ttf”），
“nunito bold”：要求（“./assets/font/nunito bold.ttf”），
});
};
常量应用=（）=>{
const[fontsLoaded，setFontsLoaded]=useState（false）；
if（fontsLoaded）{
返回(
)
}否则{
return（setFontsLoaded（true）}onError={（）=>{}/>）
}
};
导出默认应用程序；

不要在导航器中还原令牌。而是这样做-

首先，从安装

expo-app-loading

然后，在

App.js

所在的位置创建一个名为

navigation

的文件夹。然后在其中创建一个名为

AppNavigator.js

的文件

在AppNavigator.js中粘贴此

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import getSecureKey from '../utilities/getSecureKey';

const Stack = createStackNavigator();

const AppNavigator = () => {
  // Remove these Lines --
  // useEffect(() => {
  //   getSecureKey()
  //     .then((res) => console.log(res))
  //     .catch((e) => console.log(e));
  // }, []);

  return (
    <Stack.Navigator showIcon={true} initialRouteName="AppTabs">
      <Stack.Screen
        name="AppTabs"
        component={AppTabs}
        options={{
          headerTitle: () => <Header />,
          headerStyle: {
            backgroundColor: '#fff',
          },
        }}
      />
    </Stack.Navigator>
  );
};

export default AppNavigator;

在你的

App.js

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { NavigationContainer } from '@react-navigation/native';
import AppLoading from 'expo-app-loading';
import useFonts from "./hooks/useFonts";

import getSecureKey from './utilities/getSecureKey';
import AppNavigator from './navigation/AppNavigator';

export default function App() {
  const [IsReady, SetIsReady] = useState(false);

  // Always perform Token Restoration in App.js just to keep code clear.    
  const FontAndTokenRestoration = async () => {
    await useFonts(); // Font is being loaded here
    const token = await getSecureKey();
    if (token) {
      console.log(token);
    }
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={FontAndTokenRestoration}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
}

import React，{useState}来自“React”；
从“react native”导入{Text，View，StyleSheet}；
从“expo常量”导入常量；
从'@react-navigation/native'导入{NavigationContainer}；
从“expo应用程序加载”导入应用程序加载；
从“/hooks/useFonts”导入useFonts；
从“/utilities/getSecureKey”导入getSecureKey；
从“./navigation/AppNavigator”导入AppNavigator；
导出默认函数App（）{
const[IsReady，SetIsReady]=useState（false）；
//始终在App.js中执行令牌恢复，以保持代码清晰。
const FontAndTokenRestoration=async（）=>{
等待useFonts（）；//此处正在加载字体
const token=等待getSecureKey（）；
如果（令牌）{
console.log（令牌）；
}
};
如果（！IsReady）{
返回(
SetIsReady（真）}
onError={（）=>{}
/>
);
}
返回(
);
}

非常感谢！但我有一个问题。我已经使用Apploading加载字体。如何加载两个函数？是的，您也可以使用

AppLoading

加载这两个函数。演示如何加载字体。我可以告诉你一个更好的方法。在问题中更新它谢谢你的时间！我更新了上面的app.js文件：）我已经更新了答案。它可以工作了，谢谢！！如果令牌存在，那么我可以在那里调度一个Api吗？因为我必须加载用户数据。我知道怎么做我只问这是不是个好方法

import * as Font from "expo-font";

export default useFonts = async () => {
  await Font.loadAsync({
    "nunito-regular": require("./assets/fonts/Nunito-Regular.ttf"),
    "nunito-bold": require("./assets/fonts/Nunito-Bold.ttf"),
  });
};

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { NavigationContainer } from '@react-navigation/native';
import AppLoading from 'expo-app-loading';
import useFonts from "./hooks/useFonts";

import getSecureKey from './utilities/getSecureKey';
import AppNavigator from './navigation/AppNavigator';

export default function App() {
  const [IsReady, SetIsReady] = useState(false);

  // Always perform Token Restoration in App.js just to keep code clear.    
  const FontAndTokenRestoration = async () => {
    await useFonts(); // Font is being loaded here
    const token = await getSecureKey();
    if (token) {
      console.log(token);
    }
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={FontAndTokenRestoration}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
}