Question

我正在尝试为我的axios呼叫设置React Native Activity Indicator。但是，触发加载程序后尝试导航时会发生此错误。加载程序会按预期显示和隐藏，但导航无法正常工作。似乎没有卸载任何组件，但显示错误。

这是警告消息：

C：\ Users \ ABTR001 \ Desktop \ upc_app \ node_modules \ react-native \ Libraries \ Core \ ExceptionsManager.js：82警告：无法在未安装的组件上执行React> state更新。这是空操作，但是它表明您的应用程序中有一个>内存泄漏。要解决此问题，请在componentWillUnmount方法中取消所有订阅和>异步任务。在NavigationContainer中（位于AppNavigator.js：20）

我认为问题出在商店，但我不确定是什么原因造成的。

Main.js

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initialRoute: null,
    };

    const self = this;
    AsyncStorage.getItem("firstTime").then(function(data) {
      return !!data
        ? self.setState({ initialRoute: "Auth" })
        : self.setState({ initialRoute: "Landing" });
    });
  }

  render() {
    return (
        <View style={{flex:1}}>
            {this.state.initialRoute ? (
              <AppNavigator initialRoute={this.state.initialRoute} />
            ) : (
              <AppLoading />
            )}

            {
              this.props.shouldLoaderDisplay && <Loader/>
            }
        </View>
    );
  }
}

function mapStateToProps(state){
  console.log('called')
    return {shouldLoaderDisplay:state.shouldLoaderDisplay}
}

export default connect(mapStateToProps)(Main)

我的LoginScreen位于AppNavigator组件内部，该组件是一个AppContainer（位于AuthStack内部）

AppNavigator.js

export default class AppNavigator extends Component{
    render(){
        const routeName=this.props.initialRoute
        const AppNavigator = createAppContainer(createSwitchNavigator({
           Landing:LandingScreen,
           Auth:AuthStack,
           Main:MainStack
        },{
           initialRouteName:routeName
        }))

        return <AppNavigator/>
    }
}

LoginScreen.js

class LoginScreen extends Component{
    static navigationOptions = {
      header : null,
      gesturesEnabled: false,
    }

    constructor(props){
      super(props)
      this.login=this.login.bind(this)
    }

    login(username,password){
        const self=this;
        self.props.dispatch(actions.triggerLoading(true))
        authentication({username,password}).then(response=>{
            let data=response.data
            self.props.dispatch(actions.auth(data))
            self.props.dispatch(actions.triggerLoading(false))
            self.props.navigation.navigate('Main')
        })
    }

    logout(){
        this.props.dispatch(actions.logout())
    }

    render(){
        return (
            <KeyboardAvoidingView style={SignInScreenStyle.loginInScreencontainer} behavior="padding">

              <Gif />

              <Header />

              <LoginForm
                login = {this.login}
              />

              <View>
                <TouchableOpacity
                  onPress = {()=>
                    this.logout()
                  }
                  style={SignInScreenStyle.registerButtonPos} >
                  <Text style={SignInScreenStyle.registerButtonText}>Don't have account yet? Register</Text>
                </TouchableOpacity>
              </View>
          </KeyboardAvoidingView>
        );
    }
}
export default connect()(LoginScreen)

请告知我是否需要其他信息。非常感谢您抽出宝贵时间来解决这个漫长的问题。祝你有美好的一天：）

在已卸载的组件上进行状态更新，但未卸载任何组件

0 个答案: