Javascript React本机异步存储调用无效，不会'；t输入callback或。然后

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

我在AsyncStorage中看到的行为实际上是不一致的。使用下面的代码，我应该可以看到一个控制台日志，其中记录了'loggedIn'变量的状态。有些跑步我看到了，有些跑步我看不到。我不知道为什么？我在componentwillmount（）中为我的根组件调用它。所以我认为事先没有任何行为干预

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

这段代码曾一度像预期的那样记录日志，打印'loggedIn:null'，但一度停止打印。即使我没有改变密码。似乎它甚至没有进入。然后封锁

我也尝试过使用回调代替承诺，但它仍然不会打印结果。 我不知道是什么问题。有什么想法吗

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

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

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

不确定我还需要哪些代码片段来说明该行为

这对你有帮助吗

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

这应该会有所帮助

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

---

不要忘记在任何需要的地方调用this.getData（）。

简而言之，这就是

异步存储。

它只保存字符串，所以每次都必须执行
JSON.parse（）
和
JSON.stringify（）
。

注意：
JSON.stringfy（false）
将返回
'false'
string。它可以工作，但不推荐。

此外，最好将存储密钥保持为全局常量

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',
  },
});

从“React”导入React；
从“react native”导入{AsyncStorage，Button，StyleSheet，Text，View}；
常量存储密钥={
登录状态：“登录状态”，
};
导出默认类App扩展React.Component{
状态={
洛格丁：错，
};
异步组件didmount（）{
等待此消息。_getLoginStatus（）；
}
render（）{
const logInMsg=this.state.loggedIn
“欢迎回来”
：'请先登录！'；
返回(
{logInMsg}
);
}
_onLoginPress=async（）=>{
试一试{
console.log（'prevState'，this.state.loggedIn）；
等待此消息。设置状态（prevState=>({
loggedIn:！prevState.loggedIn，
}));
const data=JSON.stringify（{loggedIn:this.state.loggedIn}）；
console.log（“仅登录按”，数据）；
等待AsyncStorage.setItem（storageKeys.loginStatus，数据）；
}捕捉（错误）{
控制台错误（err）；
}
};
_getLoginStatus=async（）=>{
试一试{
const jsonValue=await AsyncStorage.getItem（storageKeys.loginStatus）；
//parse（null）将返回null
console.log（“getLoginStatus”，jsonValue）；
const value=JSON.parse（jsonValue）；
if（value&&value.loggedIn！==null）{
这是我的国家({
loggedIn:value.loggedIn，
});
}
}捕捉（错误）{
控制台错误（err）；
}
};
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

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

更新：

setState
函数还需要有
await
，另一种方法是在回调函数中设置
AsyncStorage
。
您没有捕获到
AsyncStorage
调用吗？它可能捕获到错误。不，我不知道，我将添加一个，然后查看控制台在那里记录了什么，然后返回给您。componentDidMount可以是异步的吗？我想我在某个地方读到过这样的消息：你可以在componentDidMount中添加async，它工作得很好。我在很多项目中都做过。
componentDidMount
可以是
async
<代码>组件将装载

无法装载。问题是

setItem

中的值需要一个字符串，因此使用JSON字符串更安全