Expo Show AsyncStorage data 重启应用后

Posted

技术标签:

【中文标题】Expo Show AsyncStorage data 重启应用后【英文标题】:Expo Show AsyncStorage data After restarting the app 【发布时间】:2019-07-16 13:46:41 【问题描述】:

我正在使用 expo 版本 32。在我的登录屏幕上,我将 AsyncStorage 设置为:

await AsyncStorage.setItem('@MyApp:user', '1');

当 API 在给定凭据上返回 true 时,上面的代码运行。在 App.js 中,通过使用反应导航 2,它重定向到我的着陆页。

const AppStack = createDrawerNavigator(
    Screen_Landing:  screen: Screen_Landing
, backBehavior: 'initialRoute');

const AppScreens = createStackNavigator(
    AppStack:  screen: AppStack
, headerMode:'none')

const AuthStack = createSwitchNavigator(Screen_Login:  screen: Screen_Login,headerMode:'none');

    const MyNavigator = createSwitchNavigator(
        
            AuthLoading: AuthLoadingScreen,
            App: AppScreens,
            Auth: AuthStack,
        ,
        
            initialRouteName: 'AuthLoading'
        
    );

问题是,当我成功登录时,它会将我重定向到登录页面,但登录页面没有获取 AsyncStorage 值,但是当我完全关闭应用程序并重新打开它时,它会显示 AsyncStorage 值。我不知道它与世博会的问题或反应导航问题。有没有人有同样的问题。我的sqlite也有同样的问题。如果我在登录前在我的 sqlite 中添加一些内容并尝试在下一个屏幕中获取数据,它也不会显示任何内容,但如果我关闭应用程序并重新打开,那么它会显示来自 sqlite 的数据。请指导是什么问题。

在我的着陆页上,我正在获取如下数据:

    async componentDidMount() 
    var uid = await AsyncStorage.getItem('@MyApp:user')
console.log(uid)
    

【问题讨论】:

你的Landing Page是否已经挂载了?问题可能是Login后没有重新挂载,而是在应用关闭后挂载,你可以在componentDidMount 再写一条日志语句来验证。跨度> 你是如何“展示”价值的? 在 componentDidMount 我把它叫做 var uid = await AsyncStorage.getItem('@MyApp:user') console.log(uid) 那么,它不是记录(来自console.log)uid吗? 【参考方案1】:

似乎您正在尝试呈现不是propstate 的数据。

如果在 React 初始渲染之后有数据进入,除非更改为 stateprops,否则它不会更新。

您可以将用户值和您的 sqlite 数据设置为组件的状态。

【讨论】:

我是,但它在我重新启动应用程序后设置状态。 您将数据设置为 state 还是 prop?你能发布那个代码吗? 因此您没有将数据设置为状态或调用处理程序来更改道具。 React 在 mount 上的生命周期是构造函数 -> 渲染 -> componentDidMount。初始渲染后不影响状态或道具的更改是看不到的。当你“重启”你的应用程序时,你会强制渲染。现在变化已反映。就像我上面说的,将其设置为 state。 不,我没有发送数据。我在登录屏幕上设置了 AsyncStorage,只是在另一个屏幕上调用了 AsyncStorage。我不是通过状态或道具传递它 这就是它不更新用户界面的原因。重新阅读我上面的答案和评论。这是状态 reactjs.org/docs/state-and-lifecycle.html 的反应文档

以上是关于Expo Show AsyncStorage data 重启应用后的主要内容,如果未能解决你的问题,请参考以下文章

AsyncStorage 与 Expo.SQLite

await 是 Expo XDE 中 React Native 的保留字错误

使用 Jest 模拟命名导入

Navigator 和 AsyncStorage 反应原生

React Native使用AsyncStorage本地持久化

AsyncStorage 更快地更新大型对象数组