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

Question

我有一个react原生应用程序，我想在其中显示登录凭据，如电子邮件，自定义抽屉组件上的名称。当我控制台信息时，我可以访问详细信息，但无法在抽屉中显示。

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)时，它显示为空白。

来自控制台的错误

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

Answer 1

您似乎混合了Async/Await和标准promise的语法。您可以将等待的值分配给一个变量，然后迭代结果来呈现您的内容，如下所示：

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