时间戳

首页 > 解决方案 > 访问登录凭据并将其显示在抽屉组件上

reactjs - 访问登录凭据并将其显示在抽屉组件上

问题描述

我有一个反应本机应用程序，我想在其中显示登录凭据，例如电子邮件，自定义抽屉组件上的名称。当我控制台信息但无法在抽屉中显示它们时，我已经能够访问详细信息。

const customDrawerContentComponent = async (props) => {
      
      let userInfo = {};

      try {
       await AsyncStorage.getItem('userInfo')
        .then(function (value) {
          return Object.assign(userInfo, JSON.parse(value))
        })
        .catch((err) => {
          console.log(err)
        })
      } catch (e) {
        console.log(e)
      }
      
        console.log(userInfo)
     }

当我这样做时，我会得到详细信息。但是，当我尝试在（userInfo.name）之类的抽屉上显示详细信息时，它显示为空白。

来自控制台的错误

如何在自定义抽屉组件上显示这些详细信息？

标签： reactjsreact-native

解决方案

您似乎混合了 Async/Await 和标准承诺的语法。您可以将 await 的值分配给一个变量，然后遍历结果以呈现您的内容，如下所示：

const customDrawerContentComponent = async (props) => {
    try {
        const userInfo = await AsyncStore.getItem('userInfo');
        console.log(userInfo);
        return (
            <div>
                {/* Don't know what userInfo is, but according to your error it looks like it's an array. */}
                {userInfo.map(item => (
                    <p>item</p>
                ))}
            </div>
        )
    } catch(e) {
        console.log('Oops, there was an error: ', e);
        return (
            <div>
                {JSON.stringify(e)}
            </div>
        )
    }
};

查看 Async/Await 文档，了解它与解决普通承诺有何不同：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

推荐阅读