没有得到正确的 AsyncStorage.getItem() 返回答案

【问题标题】：Didn't get correct return of AsyncStorage.getItem()没有得到正确的 AsyncStorage.getItem() 返回
【发布时间】：2020-02-04 03:48:43
【问题描述】：

我尝试使用同步功能从 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,
 })

}

【问题讨论】：

标签： reactjs react-native async-await

【解决方案1】：

你的 headerLeft 函数返回 Promise，因为它是 async

但我猜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}/>
....

【讨论】：

工作，差点忘记清除 AsyncStorage。但是我无法传递导航道具的小问题，尝试使用
@Alfian 我刚刚在功能道具中添加了{navigation}，你可以试试

【解决方案2】：

为左侧的标题创建组件，其中包含您从存储中获得的状态并将导航推送为道具。组件的异步组件WillMount 从存储中获取异步并更新状态。

 Guest:{
screen:MainScreen,
navigationOptions: ({navigation}) => ({
 headerLeft:<MyHeaderLeft navigation={navigation}/>.....

【讨论】：

你写过示例代码吗？我试过写还是不明白