收到错误对象作为 React 子对象无效（找到：带有键 {_40、_65、_55、_72} 的对象）答案

【问题标题】：Getting an error Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72})收到错误对象作为 React 子对象无效（找到：带有键 {_40、_65、_55、_72} 的对象）
【发布时间】：2020-04-14 00:43:42
【问题描述】：

我收到此错误。诺言似乎没有兑现。但是，我不确定如何解决这个问题...... 我正在使用异步存储

错误：

对象作为 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：

我注意到我可以做这样的事情

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 行）我无法执行 this.setState，因为我得到了（setState of undefined），并且我无法将 return 放在 //comment 中，因为我得到“找不到返回声明”

有什么想法可以实现这一点吗？

编辑 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"} 覆盖，它显示的是个人资料而不是我的用户名。

【问题讨论】：

这种对象 {_40, _65, _55, _72} 可能是因为您没有等待异步请求完成，您说您正在使用异步存储但我没有看到任何在您的共享代码中
@Charlie 在第 5 行，我编辑了我的帖子。有什么想法可以修改我的代码以使其正常工作吗？

标签： react-native

【解决方案1】：

在组件本身使用setOptions，navigation.setOptions({ title: 'Some title' })

如here所述：

通常需要更新选项配置来自已安装屏幕组件本身的活动屏幕。我们可以完成这个使用导航.setOptions

【讨论】：

我仍然遇到同样的错误。似乎是因为每次我使用() => {// AsyncStorage calll} 时，我都会收到此错误。没有箭头功能可以正常工作。但是，我需要箭头功能。有什么想法可以解决吗？
将 AsyncStorage 请求拉到此之外呢？你试过吗？
拉取 AsyncStorage 请求是什么意思？我尝试在另一个文件中创建一个函数并导出/导入该函数但同样的错误:(我已经坚持了一段时间了......
ok，这是另一个思路，在组件本身使用 setOptions，navigation.setOptions({ title: 'Updated!' }) reactnavigation.org/docs/headers/…
在你的情况下是