从另一个组件中更改React Native App.js中的状态

Question

我在应用程序中进行身份验证，我有点卡住了。我有2个不同的导航。一个显示用户是否已登录，另一个如果不是。基本上是屏幕上的标志。如果我在开始时手动更改值，则可以正常工作。但是，例如，当用户登录时，我找不到改变状态的方法。即使Auth模块中的值更改，它也不会在App.js中进行更新，因此我如何从屏幕上的登录中更新app.js的状态？

import React, { Component } from 'react';
import { AppRegistry, Platform, StyleSheet, Text, View } from 'react-native';
import DrawerNavigator from './components/DrawerNavigator'
import SignedOutNavigator from './components/SignedOutNavigator'
import auth from './auth'
type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props)
    this.state = {
      isLoggedIn: auth.isLoggedIn
    }
  }
  render() {
    return (
      (this.state.isLoggedIn) ? <DrawerNavigator /> : <SignedOutNavigator />
    );
  }
}
AppRegistry.registerComponent('App', () => App)

和我的auth模块，这很简单 从'react-native'导入{asyncstorage}; //尝试从本地文件阅读 令api_key 令Isloggedin = false

function save_user_settings(settings) {
    AsyncStorage.mergeItem('user', JSON.stringify(settings), () => {
        AsyncStorage.getItem('user', (err, result) => {
            isLoggedIn = result.isLoggedIn
            api_key = result.api_key
        });
        isLoggedIn = true
    });
}
module.exports.save_user_settings = save_user_settings
module.exports.api_key = api_key
module.exports.isLoggedIn = isLoggedIn

Answer 1

首先，有很多方法可以解决此问题。因此，我将尝试向您解释为什么您现在没有工作。

发生这种情况的原因是，当您将auth.isLoggedIn分配给isLoggedIn状态时，您将分配 value 一次，将其作为副本。这不是存储的参考。

除此之外，请记住，React状态通常仅使用setState()更新，并且在这里从未调用，因此您的状态不会更新。

我将解决此问题的方式，而没有引入Redux（例如Redux）本身对此问题的过度攻击，是考虑构建一个身份验证的高阶组件，该组件可以处理所有身份验证逻辑并包装您的整个应用程序。从那里您可以控制是否应该渲染孩子或重定向。

auth component

componentDidMount() {
 this._saveUserSettings(settings);
}
_saveUserSettings(settings) {
    AsyncStorage.mergeItem('user', JSON.stringify(settings), () => {
        AsyncStorage.getItem('user', (err, result) => {
            isLoggedIn = result.isLoggedIn
            api_key = result.api_key
        });
        this.setState({isLoggedIn: true});
    });
}
render() {
 const { isLoggedIn } = this.state;
 return isLoggedIn ? this.props.children : null;
}

app.js

render() {
   <AuthComponent>
      //the rest of authenticated app goes here
   </AuthComponent>
}

这是一个非常快速，不完整的示例。但是它应该向您展示您可能想如何将身份验证放出。但是，您还需要考虑处理错误等。