Не удалось получить правильный возврат AsyncStorage.getItem () - PullRequest
0 голосов
/ 06 октября 2019

Я пытаюсь получить значение из ключа в AsyncStorage с помощью функции синхронизации и пытаюсь напечатать по команде console.log () значение является правильным в моем ожидании, но когда я делаю if с троичным, оно получает ошибку, подобную этой.

Неопознанная ошибка: нарушение инварианта: нарушение инварианта: объекты недопустимы как дочерние элементы React (найдено: объект с ключами {_40, _65, _55, _72)

Вот код части реагирования навигатора-нативный

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 ]

1 голос
/ 06 октября 2019

Ваша 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}/>
....
0 голосов
/ 06 октября 2019

Создайте компонент для оставленного заголовка с состоянием того, что вы получите из хранилища, и нажмите навигацию как реквизит. При асинхронном компоненте компонентВиллМонт получить асинхронный из хранилища и обновить состояние.

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