React Native AsyncStorage调用无效，不会进入回调或.then

Question

关于AsyncStorage的问题。我正在开发一个RN应用程序，我需要异步存储来跟踪用户的登录状态和令牌。

我在AsyncStorage中看到的行为确实不一致。使用下面的代码，我应该看到'loggedIn'变量状态的控制台日志。有些跑步我看到了这一点，有些跑步我没看到。我不知道为什么？我在componentwillmount（）中为我的根组件调用它。所以我认为之前没有任何行为干扰。

AsyncStorage.getItem('loggedIn').then((loggedIn) => {
      console.log('loggedIn:');
      console.log(loggedIn);
      if ( loggedIn != null)
      {
        this.state.loggedIn = true;
      }
    });

此代码在某一点上用于记录预期，打印'loggedIn：null'，但它在某一点停止打印。即使我没有改变代码。好像它甚至没有进入.then块。

我也尝试使用回调而不是promises，它仍然不打印结果。我不知道问题是什么。有任何想法吗？

我已经下载了Reactotron来尝试跟踪AsyncStorage的行为。但是，当我尝试在另一个组件中设置变量时，它似乎没有显示对AsyncStorage的任何更改，如下面的代码块所示。

成功登录后，我尝试保存密钥，但它似乎也不起作用。我没有得到控制台日志，我在Reactotron上看不到任何变化。

AsyncStorage.setItem('key', data.key, () => { AsyncStorage.getItem('key', (err, result) => {
                console.log(result)});});

不确定我需要说明行为的其他代码片段。

Answer 1

这应该有所帮助

getData = async () => {
   try{
      await AsyncStorage.getItem('loggedIn', (err, loggedIn) => {
         if(!err && loggedIn!=null){
            this.setState({loggedIn});
         }   
      })
   }catch(e){
      console.log("Error ", e);
   }     
}

不要忘记在任何地方打电话给this.getData()。

Answer 2

这可以帮到你吗？

async componentDidMount() {
  const setLoggedIn = await AsyncStorage.setItem("loggedIn", true);
  const loggedIn = await AsyncStorage.getItem("loggedIn");
  if (loggedIn) {
    this.setState({
      loggedIn: loggedIn
    })
  }
}

Answer 3

简而言之，这就是AsyncStorage。 它只保存字符串，所以你每次都要做JSON.parse()和JSON.stringify()。 注意：JSON.stringfy(false)将返回'false'字符串。它有效，但不推荐。 此外，最好将存储密钥保持为全局常量。

import React from 'react';
import { AsyncStorage, Button, StyleSheet, Text, View } from 'react-native';

const storageKeys = {
  loginStatus: 'login-status',
};

export default class App extends React.Component {
  state = {
    loggedIn: false,
  };

  async componentDidMount() {
    await this._getLoginStatus();
  }

  render() {
    const logInMsg = this.state.loggedIn
      ? 'Welcome back'
      : 'Please log in first!';
    return (
      <View style={styles.container}>
        <Text>{logInMsg}</Text>
        <Button onPress={this._onLoginPress} title="Toggle login" />
      </View>
    );
  }

  _onLoginPress = async () => {
    try {
      console.log('prevState', this.state.loggedIn);
      await this.setState(prevState => ({
        loggedIn: !prevState.loggedIn,
      }));
      const data = JSON.stringify({ loggedIn: this.state.loggedIn });
      console.log('_onLoginPress', data);
      await AsyncStorage.setItem(storageKeys.loginStatus, data);
    } catch (err) {
      console.error(err);
    }
  };

  _getLoginStatus = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem(storageKeys.loginStatus);
      // JSON.parse(null) will return null
      console.log('_getLoginStatus', jsonValue);
      const value = JSON.parse(jsonValue);
      if (value && value.loggedIn !== null) {
        this.setState({
          loggedIn: value.loggedIn,
        });
      }
    } catch (err) {
      console.error(err);
    }
  };
}

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

在这种情况下，所有函数都应该是async。

更新： setState函数也需要有await，另一种方法是在回调函数中设置AsyncStorage。