“对象作为 React 子对象是无效的。如果您打算渲染子对象的集合，请改用数组。” 错误

Question

我试图传递一个user对象作为我的 React 的值，Context.Provider如<UserContext.Provider value={user} />. 然而，React 不喜欢将对象作为子对象传递的想法。这是我收到的错误消息：

错误：对象作为 React 子对象无效（找到：带有键 {id、用户名、名字、姓氏、电子邮件、头像}的对象）。如果您打算渲染子集合，请改用数组。

我希望有人能提供帮助。这是我的 React 组件，所有这些都发生在其中：

class MyApp extends App {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
      authenticating: false,
    };
  }

  logout = () => {
    ...
  };

  render() {
    const { Component, pageProps } = this.props;
    const user = {
      user: this.state.user,
      logout: this.logout,
    };
    return (
      <>
        {!this.state.authenticating && (
          <UserContext.Provider value={user}>
            <Navbar />
            <Component {...pageProps} />
          </UserContext.Provider>
        )}
      </>
    );
  }
}

有趣的是，当我改变时

const user = {
  user: this.state.user,
  logout: this.logout,
};

到（例如）

const user = {
  username: this.state.user.username,
  logout: this.logout,
};

一切都很好。

因此（正如上面的错误消息所暗示的那样）问题在于传递this.state.user给我的上下文提供程序。为什么？我该如何解决这个问题？

另外，这是我的<Context.Consumer />：

  <UserContext.Consumer>
    {user => (
      <>
        {user.user ? (
          <>
            <Avatar user={user.user} />
            <Button onClick={user.logout}>Logout</Button>
          </>
        ) : (
          <>
            <Nav.Link href="/users/login">Log in</Nav.Link>
            <Nav.Link href="/users/signup">Sign up</Nav.Link>
          </>
        )}
      </>
    )}
  </UserContext.Consumer>

Answer 1

代替

function Avatar({ user }) {
  return <Nav.Link href="/users/login">{user}</Nav.Link>;
}

和

function Avatar({ user }) {
  return <Nav.Link href="/users/login">{user.something}</Nav.Link>;
}