javascript - 无法在 React Native 中使用从 AsyncStorage/SecureStore 返回的电子邮件和 token ？

Question

我已经四处寻找并回答我的问题，但我似乎找不到类似的东西。我的代码返回了预期的值!

我正在 React-Native 中构建一个应用程序，目前正在处理登录问题。我需要保存 userId、userEmail 和 userToken，并提出了 AsyncStorage 和 Expo 的 SecureStore 作为选项，但我遇到了一个以前从未见过的非常奇怪的问题。

我可以设置和读取所需的数据，但是当我尝试使用它时，它不起作用，但是当我对其进行硬编码时，它起作用了？ (这有点难以解释)。

这就是问题所在。为了便于阅读，我省略了其余的代码，如果我对下面的值进行硬编码，它就可以正常工作......

    // Set the email and token
    // Before setting these, I logged the key's values and (of course), they were null
    // After setting them I logged them out again and they're set

/** from promise (no problems) **/

    SecureStore.setItemAsync('shifterEmail', responseJson.email);
    SecureStore.setItemAsync('shifterToken', responseJson.token);

/** returns response (no problems) **/

...同时，在页面下方...

/** another function **/
    let shifterEmail = '';
    let shifterToken = '';

    SecureStore.getItemAsync('shifterEmail')
        .then((email) => {
            shifterEmail = email;
            console.log('API email: ', shifterEmail); // my@email.com <- good!
        })
        .catch((error) => {
            console.log('API email error: ', error);
        });

    SecureStore.getItemAsync('shifterToken')
        .then((token) => {
            shifterToken = token;
            console.log('API token: ', shifterToken); // random token <- good!
        })
        .catch((error) => {
            console.log('API token error: ', error);
        });

    return {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': 'Token' +
        ' token=' + shifterToken + // WHAAAT <- doesn't work
        ', email=' + shifterEmail, // WHAAAT <- doesn't work
    };

我灵机一动，虽然这可能是很好的旧异步性，并尝试将它们嵌套在回调中，但这没有什么区别。我在这里展示了 SecureStore 的代码，但它与 AsyncStorage 相同，我可以获得电子邮件和 token 的预期值，但它不起作用.

但是，有一点奇怪，我不明白......

如果我在返回中对 token 和电子邮件进行硬编码，它就可以正常工作!

头脑=崩溃

• 我可以使用typeof来确保它是一个字符串。
• 我在设置和获取时尝试过 JSON.stringify() 和 JSON.parse()。
• 我尝试过设置并使其内嵌，并作为可调用函数。
• 我尝试过嵌套回调，并让它们保持顺序。
• 我什至尝试在返回时添加超时，以确保一切都已设置。

...没有任何效果:(

附注:这些都是字符串，但我对数字也有同样的问题，而我让它工作的唯一方法是引入“get”(来自 AsyncStorage和 SecureStore)脱离其可调用函数并内联代码。另外，如果我不保存电子邮件和 token ，而是将其添加到变量中并在返回中使用它，它就可以正常工作，但这并不好，因为用户每次打开应用程序时都必须登录。

彻底迷惑了。很高兴回答任何问题，我已经尝试了很多，所以我们可以进行一次愉快的旧聊天，或者，如果您可以建议一种不同的处理登录方式，我也很乐意听到!

为什么我不能使用该值，但可以硬编码相同的东西？？？

谢谢!

Answer 1

看起来这是一个异步问题。根据您提供的代码片段，return 语句可能会在调用 .then 回调之前运行。

一个简单的解决方法是使用 async/await 或 Promise.all

例如:

异步/等待

const getToken = async () => {
    try{
      const email = await SecureStore.getItemAsync('shifterEmail')
      const token = await SecureStore.getItemAsync('shifterToken')

      return {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': 'Token' +
        ' token=' + token + 
        ', email=' + email
      };
    } catch(error) {
      console.error(error);
      throw error;
    }
 }

Promise.all

 const getToken = () => {
    Promise.all([
      SecureStore.getItemAsync('shifterEmail'),
      SecureStore.getItemAsync('shifterToken')  
    ])
   .then((response) => {
      const [email, token] = response
       return {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Token' +
          ' token=' + token + 
          ', email=' + email
        };
      }
    ).catch((error) => {
      console.error(error);
      throw error;
    });
 }