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

Question

Я получаю эту ошибку. Кажется, обещание не выполнено. Однако я не уверен, как это исправить ... Я использую Asyn c Хранение

Ошибка:

Объекты недопустимы как дочерний элемент React (найдено: объект с ключи {_40, _65, _55, _72}).

Вот мой код

const ProfileStackScreen = ({navigation}) => {
  return (<ProfileStack.Navigator>
    <ProfileStack.Screen name= {"Profile"} component={Profile}
    options ={{
      title: AsyncStorage.getItem('username'),
      headerRight: () => (
          <Icon name="cog" color={"grey"} size={26} style={{marginRight: 20}}
          onPress={() => navigation.navigate("Settings")}/>
      ),
      headerLeft: () => (
        <Icon name="users" color={"grey"} size={23} style={{marginLeft: 20}}
        onPress={() => navigation.navigate("ManageFriends")}/>
    )
    }}/>
    <SettingsStack.Screen name="Settings" component={Settings}/>
    <ManageFriendsStack.Screen name="ManageFriends" component={ManageFriends}/>
  </ProfileStack.Navigator>);
}

Редактировать 1:

I заметил, что я могу сделать что-то вроде этого

const ProfileStackScreen = ({navigation}) => {
  AsyncStorage.getItem('username').then(name => {
    //comment
    console.log(name);
  });
  return (<ProfileStack.Navigator>
    <ProfileStack.Screen name= {"Profile"} component={Profile}
    options ={{
      title: "hi",
      headerRight: () => (
          <Icon name="cog" color={"grey"} size={26} style={{marginRight: 20}}
          onPress={() => navigation.navigate("Settings")}/>
      ),
      headerLeft: () => (
        <Icon name="users" color={"grey"} size={23} style={{marginLeft: 20}}
        onPress={() => navigation.navigate("ManageFriends")}/>
    )
    }}/>
    <SettingsStack.Screen name="Settings" component={Settings}/>
    <ManageFriendsStack.Screen name="ManageFriends" component={ManageFriends}/>
  </ProfileStack.Navigator>);
}

Тем не менее, я хочу установить имя в заголовке (строка 5), я не могу сделать это.setState, так как я получаю (setState of undefined), и я не могу положить return внутри // комментария, так как я получаю "не могу найти возвращаемое утверждение"

Есть идеи, как мне этого добиться?

РЕДАКТИРОВАТЬ 2

Попытка добавления navigation.setOptions

const ProfileStackScreen = ({navigation}) => {
  AsyncStorage.getItem('username').then(name => {
    navigation.setOptions({title: name});
  });
  return (<ProfileStack.Navigator>
    <ProfileStack.Screen name= {"Profile"} component={Profile}
    options ={{
      headerRight: () => (
          <Icon name="cog" color={"grey"} size={26} style={{marginRight: 20}}
          onPress={() => navigation.navigate("Settings")}/>
      ),
      headerLeft: () => (
        <Icon name="users" color={"grey"} size={23} style={{marginLeft: 20}}
        onPress={() => navigation.navigate("ManageFriends")}/>
    )
    }}/>
    <SettingsStack.Screen name="Settings" component={Settings}/>
    <ManageFriendsStack.Screen name="ManageFriends" component={ManageFriends}/>
  </ProfileStack.Navigator>);
}

Однако, он получает переопределение name= {"Profile"}. Он показывает профиль вместо моего имени пользователя.

Answer 1

Используйте setOptions в самом компоненте, navigation.setOptions ({title: 'Some title'})

Как указано здесь :

Это часто необходимо обновить конфигурацию параметров для активного экрана из самого компонента смонтированного экрана. Мы можем сделать это с помощью navigation.setOptions