Question

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

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

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

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

我也试过使用回调而不是承诺，但仍然没有打印结果。我不知道问题是什么。有什么想法吗？

我已经下载了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。

React Native AsyncStorage调用无效，不会输入回调或。

3 个答案: