我正在一个应用程序中进行身份验证,我有点卡住了。我有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'的非常简单的import {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
首先,有很多方法可以解决这个问题。因此,我将尝试向您解释为什么您现在拥有的不起作用。
发生这种情况的原因是因为当您将auth.isLoggedIn
分配给isLoggedIn
状态时,您将分配值一次,类似于副本。它不是存储的引用。
除此之外,请记住,React状态通常仅使用setState()
更新,并且永远不会在此处调用,因此您的状态不会更新。
我没有引入像Redux这样的问题来解决这个问题的方法就是研究构建一个认证高阶组件,它处理所有的认证逻辑并包装你的整个应用程序。从那里你可以控制你是否应该渲染孩子,或者做一个重定向。
验证组件
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>
}
这是一个非常快速,不完整的例子。但它应该向您展示您可能希望如何进行身份验证。但是,您还需要考虑错误处理等。