时间戳

首页 > 解决方案 > 如何解决：无法在 React-Native 中的未安装组件警告上调用 setState（或 forceUpdate）？

javascript - 如何解决：无法在 React-Native 中的未安装组件警告上调用 setState（或 forceUpdate）？

问题描述

在HomeScreen的 React-native 项目中，我从AsyncStorage获得了一些值。得到这个值后，我比较它并决定接下来将进入哪个屏幕。如果getValue为空，那么它将进入WelcomeScreen，如果它不为空，那么它将进入HomeDrawer屏幕。

在这里，我提供了代码-

import React from 'react';
import { StyleSheet, Text, View, AsyncStorage } from 'react-native';
import {StackNavigator} from 'react-navigation';
import WelcomeScreen from './WelcomeScreen';
import LoginScreen from './components/LoginScreen';
import NoteMeHome from './components/NoteMeHome';
import HomeDrawer from './HomeDrawer/HomeDrawer';
import SettingsScreen from './components/SettingsScreen';

class HomeScreen extends React.Component {

  state = {
    getValue: '',

  }

  async componentDidMount() {

    const token = await AsyncStorage.getItem('toke');
    this.setState({ getValue: token });

  }

  render() {
    console.log('#ZZZ:', this.state.getValue);

    if(this.state.getValue !== null) {
      return (
        <AppStackNavigator/>
      );
    } else {
      return (
        <AppStackNavigator2/>
      );
    }

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


const AppStackNavigator = new StackNavigator({
  HomeDrawer: {screen:HomeDrawer},
  WelcomeScreen: {screen:WelcomeScreen},


  LoginScreen: {screen:LoginScreen},
  NoteMeHome: {screen:NoteMeHome},

  SettingsScreen: {screen:SettingsScreen}

})

const AppStackNavigator2 = new StackNavigator({
  WelcomeScreen: {screen:WelcomeScreen},
  HomeDrawer: {screen:HomeDrawer},

  LoginScreen: {screen:LoginScreen},
  NoteMeHome: {screen:NoteMeHome},

  SettingsScreen: {screen:SettingsScreen}

})

export default HomeScreen;

现在，在运行这个之后，如果我在变量 getValue 中得到空值，那么它会显示以下警告 -

警告：无法在未安装的组件上调用 setState（或 forceUpdate）。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请取消 componentWillUnmount 方法中的所有订阅和异步任务。

那么，我该如何解决这个警告问题呢？

标签： javascriptreact-nativereact-navigation

解决方案

我不知道这是否是一个好习惯。问题是 - 我的组件正在使用空字符串进行初始化，并且我在渲染函数中检查 null。使用 null 初始化 getvalue 或检查渲染中的空字符串将解决此问题。

所以，我在代码中所做的更改是 -

state = {
    getValue: ''

  }

它消除了警告。

推荐阅读