在 React Native 中从 AsyncStorage 获取项目

Question

我有一份使用 React Native 的公司列表。

当我点击其中一家公司时，我得到了用于所选公司的 API 的 url。然后我将它存储到 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,
    .....
}

但是没有用。有什么建议吗？

Answer 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() {
    ....
    });
  });
},

Answer 2

AsyncStorage.getItem 是一个承诺，需要等待响应而不是直接访问，调用它的函数应该定义为异步。这是从 AsyncStorage 检索的示例..

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

在 React Native 中从 AsyncStorage 获取项目

Get item from AsyncStorage in React Native

react-native

asyncstorage