reactjs - 在 React Native 中从 asyncStorage 检索数据

Question

我知道有人问过类似的问题，例如 this ，但我无法找到答案。我也是 react 原生的新手。我需要从存储中检索数据，这就是我在 API 调用后存储值的方式

_storeData = async response => {
 it AsyncStorage.setItem(token, (response))
  .then(() => {
  this.setState({
     shouldLoad : false
   });  
    console.log("Data saved successfully" + response);
    this.props.navigation.navigate("HomeScreen");
  })
  .catch(() => {
    console.log("There was an error saving the data");
  });
 };

这就是我尝试从AsyncStorage检索数据的方法

 AsyncStorage.getItem(token).then((token) => {
  this.setState({
    token : tokentoken,
    currentState : false
  });
});

我想要实现的是 session 管理。登录时，我将 sessionToken 保存到 AsyncStorage，当应用程序再次启动时，我需要检索数据。我尝试了不同的代码，但没有得到输出。

任何帮助将不胜感激提前致谢

编辑 1。

我将整个代码粘贴到这里，以便任何人都可以指出哪里出了问题。

export default class App extends Component {
 constructor() {
super();
this.state = {
  token: null,
  currentState : true,
};
}

 componentDidMount() {
AsyncStorage.getItem(token).then((token) => {
  this.setState({
    token : tokentoken,
    currentState : false
  });
});
  }


  render() {
var ggg = this.state.token;
console.log(ggg);

if(this.state.currentState === false){

if (this.state.token === "" || this.state.token === null) {
  return <LoginNav />;
} else {
  return <HomeNavigatorNew />;
}

}

 else{
return (  <ActivityIndicator  
  animating={true}
    style={{ 
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',

      height: 80
    }}
    size="large"
  />)
  }
  }
 }

编辑 2。

我在 App.js 中编写上述代码，我只是将整个代码移至 Login.js(另一个文件)，它就可以工作了。这是否意味着什么......？我是不是应该在App.js中编写检索代码

编辑 3。感谢@Mohammed Ashfaq 和@Samer Murad 如此迅速的回复。在 Samrs 代码中，我注意到 AsyncStorage 是在大括号中导入的，而不是没有它们。我在没有它们的情况下进口。我在编辑 2 中提到，代码正在另一个文件中工作，其中 AsyncStorage 被导入到大括号中。留下修改后的工作代码以供将来某人引用

 import React, {Component} from "react";
 import   {AsyncStorage, ActivityIndicator} from "react-native";
 import { createStackNavigator} from "react-navigation";

 export default class App extends Component {
  constructor() {
   super();
   this.state = {
  token: null,
  currentState: true,
};
 }
  _retrieveData = async () => {
   console.log("Data retrieved successfully");

 // var tokenRetrieved = AsyncStorage.getItem('LoginTocken');
await AsyncStorage.getItem('LoginTocken')
  .then(value => { 
    return (value);
  })
  .then ( valueJson => {
    this.setState({
      token : valueJson,
      currentState : false
    });
    console.log("Data retrieved successfully", valueJson);
  })
  .catch((error) => {
    console.log("There was an error retrieving the data" + error);
  });



  };

  handleSession = async () => {
console.log("handleSession");
   this._retrieveData().catch((error) => {console.log("error is " + 
 error);});
  };

  componentWillMount() {
console.log("componentWillMount");
this.handleSession();
  }


  render() {


if (this.state.token === "" || this.state.token === null) {
  return <LoginNav / > ;
} else {
  return <HomeNavigatorNew / > ;
}
 }

}

我不知道为什么以及如何在没有大括号**{}**的情况下完成某些导入，而有些则使用大括号完成导入。如果有人知道为什么有时会省略/添加大括号，我请他们留下答案。

Answer 1

这是我不久前编写的 LocalStorage 包装器，如果您需要过期日期行为，它还包括在对象/键上设置 TTL 的功能，我将其用于与您相同的逻辑，即检查是否有保存的 token 并导航到主应用程序 View 而不是登录页面。

这是包装器:

// RN < 0.59
import { AsyncStorage } from 'react-native'
// RN > 0.59
import AsyncStorage from '@react-native-community/async-storage';


/**
 *
 * @param key Key value of the object to be saved
 * @param object The Object to save
 * @param ttl (Optional) set an expiration date on an object in ms
 * @return {Promise<void>}
 */
export const setObjectForKey = async ({key, object, ttl = undefined }) => {

    if (!key) throw new Error('Cannot set an object without a key');

    if (!object) throw new Error('Cannot set a key without an object');

    let expiresAt = undefined;
    if (ttl) {
        expiresAt = new Date().getTime() + ttl;
    }
    let wrappedObj = {
        object,
        expiresAt,
    };
    let stringedWrapper = JSON.stringify(wrappedObj);

    return await AsyncStorage.setItem(key,stringedWrapper)
};


/**
 *
 * @param key The key of the object to remove
 * @return {Promise<void>}
 */
export const removeObjectForKey = async (key) => {
    return await AsyncStorage.removeItem(key)
};


/**
 *
 * @param key The key of the object to retrieve
 * @return {Promise<*>}
 */
export const getObjectForKey = async (key) => {
    let now = new Date().getTime();
    let stringedWrapper = await AsyncStorage.getItem(key);

    if (!stringedWrapper) throw new Error('No key found for object');

    let wrapper = JSON.parse(stringedWrapper);
    if (wrapper.expiresAt < now) {
        // Object expired
        AsyncStorage.removeItem(key);
        throw new Error('Object expired');
    } else {
        return wrapper.object;
    }
};

这是一个使用示例(在我的解决方案中，我有一个 redux 中间件，因此在检索对象后我调用调度):

获取:

let key = 'APP_TOKEN';
localstorage.getObjectForKey(key)
            .then((retrievedObject) => {
               // Do what you want with object
            })
            .catch((err) => {
               // Handle error, Object either doesn't exist, expired or a system error
            })

设置:

 let key = 'APP_TOKEN';
 let object = {token: 'JWT_HASH'};
 let ttl = undefinded // TTL is optional
 localstorage.setObjectForKey({
            key,
            object,
            ttl,
        })
            .then(() => {
               // Set was successfull
            })
            .catch((err) => {
                // Handle Error
            })

删除:

localstorage.removeObjectForKey(key)
            .then(() => {
              // Successfully deleted
            })
            .catch((err) => {
               // Object either doesn't exist to delete or system error
            })

请注意，我实际上保存了字符串化的对象，因此即使我保存了 api token ，我实际上也保存了一个以 token 作为键的对象，即:{token: 'TOKEN'}

希望有帮助

更新2019-06-06

从 react-native 0.59 开始，由于努力使 react-native 的核心库更精简，AsyncStorage 模块已被弃用... AsyncStorage 现在应该通过 @react-native-community/react-native-async-storage 安装