没有正确返回AsyncStorage.getItem()

时间:2019-10-06 17:11:57

标签: reactjs react-native async-await

我已经尝试通过具有同步功能的AsyncStorage中的键获取值,并尝试在console.log()命令上打印,该值符合我的期望,但是当我使用三元进行if运算时,会出现这样的错误。

  

未捕获的错误:永久违反:永久违反:对象作为React子对象无效(找到:带有键的对象{_40,_65,_55,_72)

这是导航器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,
 })

}

2 个答案:

答案 0 :(得分:1)

您的headerLeft函数返回的承诺是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}/>
....

答案 1 :(得分:0)

为标头左侧的组件创建组件,其中包含您从存储中获取的状态,并以导航方式作为道具。 在异步组件上,组件的WillMount从存储中获取异步并更新状态。

SELECT last_name, salary
FROM employees
WHERE salary > 11000
                (SELECT salary
                 FROM employees
                 WHERE last_name='Abel');