reactjs - 没有得到正确的 AsyncStorage.getItem() 返回
问题描述
我尝试使用同步功能从 AsyncStorage 中的键获取值并尝试在 console.log() 命令上打印该值在我的预期中是正确的,但是当我使用三元进行 if 时,它会出现这样的错误。
未捕获的错误:不变违规:不变违规:对象作为 React 子级无效(找到:带有键的对象{_40,_65,_55,_72)
这里是navigator react-native的部分代码
Guest:{
screen:MainScreen,
navigationOptions: ({navigation}) => ({
headerLeft:
(async () => {
const login = await AsyncStorage.getItem("isLogin");
(login == null) ?
<Text></Text>
:
<Icon
style={{ paddingLeft: 10, color: '#ffffff', }}
onPress={() => navigation.openDrawer()}
name="menu"
size={30}
/>
})
,
headerTransparent:true,
})
}
解决方案
您的headerLeft
函数按原样返回 Promiseasync
但headerLeft
我猜必须返回 React.Element。
所以最好在那里删除异步并创建单独的组件
import React, { useEffect, useState } from 'react';
const getLogin = async(setLogin) => {
const login = await AsyncStorage.getItem('isLogin');
setLogin(login);
}
export const HeaderLeft = ({navigation}) => {
const [login, setLogin] = useState(null);
useEffect(() => {
getLogin(setLogin);
}, []);
return (login == null)
? <Text/>
: <Icon
style={{ paddingLeft: 10, color: '#ffffff', }}
onPress={() => navigation.openDrawer()}
name="menu"
size={30}
/>
}
并使用
...
headerLeft: <HeaderLeft navigation={navigation}/>
....
推荐阅读
- xamarin - Uno 平台自定义渲染器
- date - 如何在 Kotlin 中转换字符串日期
- python - 用python解析数据
- geopandas - OSMxn - 如何使用边界框和 figsize 绘制到特定位置和分辨率
- java - 是否有任何功能或建议将列表拆分为子列表
- java - 将另一个依赖项(休眠)的所有依赖项隐藏到 jar 中
- discord.js - Discord JS - 从附件下载图像
- python - 从命令行打印 python 的 sys.path
- azure-devops - 使用 Azure DevOps Release 将服务角色和副本映射到服务器
- netsuite - 我们可以通过单击按钮更新 Netsuite“自定义记录类型”字段吗?