从React Native中的AsyncStorage获取项目

时间:2017-05-12 14:34:53

标签: react-native asyncstorage

我在React Native中有一系列公司。

当我点击其中一家公司时,我会获得用于所选公司的API的网址。然后我将其存储到AsyncStorage,然后我显示登录屏幕。功能如下:

selectCompany(data_url, e) {
    AsyncStorage.setItem("data_url", JSON.stringify(data_url), () => this.props.login());
}

然后在登录页面上点击sign in按钮我转到onLogin功能,功能如下:

onLogin: function() {  
  fetch(data.url + '/manager/api/v1/obtain-auth-token/', })
    .then(function(body) {
    return body.json();
  }).then(function(json) {
    .....
  }).catch(function() {
    ....
  });
},

data.url来自data.js文件,我尝试从data.js文件中获取url,如下所示:

let data_url = AsyncStorage.getItem("data_url").then(json => JSON.parse(json));
module.exports = {

    url: data_url,
    .....
}

但它不起作用。有什么建议吗?

2 个答案:

答案 0 :(得分:1)

AsyncStorage是异步的,因此在检索到它所寻找的内容之前不会定义data_url,你需要将fetch移动到get中返回的promise中,这样它就会在它被运行后运行它。完成了获取数据。这可能是解决问题的一种方法:

const data_url = () => AsyncStorage.getItem("data_url"); //change this into a function
module.exports = {

    url: data_url,
    .....
}

现在在您的组件内......

onLogin: function() {
  data.url().then((url) => {
   fetch(JSON.parse(url) + '/manager/api/v1/obtain-auth-token/', })
    .then(function(body) {
      return body.json();
    }).then(function(json) {
    .....
    }).catch(function() {
    ....
    });
  });
},

答案 1 :(得分:0)

AsyncStorage.getItem是一个promise,需要等待响应而不是直接访问,调用它的函数应定义为async。以下是从AsyncStorage中检索的示例..

export async function getAccessKey(){
 let accessToken =  await AsyncStorage.getItem(ACCESS_TOKEN);
 return accessToken;
}