Javascript &引用；对象作为子对象无效。如果要呈现子对象集合，请使用数组；错误

我正在尝试传递一个

用户

对象作为我的React

上下文的值。提供程序

与

中一样。但是，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>
        )}
      </>
    );
  }
}

到（例如）

一切都很顺利

因此（正如上面的错误消息所暗示的）问题在于将

this.state.user

传递给我的上下文提供程序。为什么？我怎样才能解决这个问题

另外，这是我的

：

{user=>(
{user.user(
注销
) : (
登录
注册
)}
)}

更换

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

函数化身（{user}）{
返回{user}；
}

与

函数化身（{user}）{
返回{user.something}；
}

更换

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

函数化身（{user}）{
返回{user}；
}

与

函数化身（{user}）{
返回{user.something}；
}

代码沙盒：

很可能您正试图这样呈现上下文，这会导致错误，而不是解构上下文/用户对象

//这会导致
//对象作为React子对象无效（找到：具有
//密钥{用户名，年龄}）。如果要呈现一组
//子级，请改用数组。
{（ctx）=>(
{ctx.user}
)

App.js

从“React”导入React；
从“/UserState”导入UserState，{Consumer}；
const Avatar=（{user}）=>(
{user.username}
{user.age}
);
const UserData=（）=>{
返回(
{（ctx）=>(
{ctx.user&&(
)}
)}
);
};
导出默认函数App（）{
const userState={
用户：{
用户名：“你好”，
年龄:18
}
};
返回(
);
}

UserState.js

从“React”导入React；
const UserState=React.createContext（{}）；
导出默认用户状态；
导出常量{Consumer}=UserState；

代码沙盒：

很可能您正试图这样呈现上下文，这会导致错误，而不是解构上下文/用户对象

//这会导致
//对象作为React子对象无效（找到：具有
//键{username，age}）。如果要呈现
//子级，请改用数组。
{（ctx）=>(
{ctx.user}
)

App.js

从“React”导入React；
从“/UserState”导入UserState，{Consumer}；
const Avatar=（{user}）=>(
{user.username}
{user.age}
);
const UserData=（）=>{
返回(
{（ctx）=>(
{ctx.user&&(
)}
)}
);
};
导出默认函数App（）{
const userState={
用户：{
用户名：“你好”，
年龄:18
}
};
返回(
);
}

UserState.js

从“React”导入React；
const UserState=React.createContext（{}）；
导出默认用户状态；
导出常量{Consumer}=UserState；

如果您有一个新问题，请将其作为一个新问题提问，而不是完全替换一个旧问题。自您设置悬赏以来，似乎您一直在重复使用同一帖子来回答一系列问题……抱歉，但您不能只是重复使用问题帖子。我们正在建立一个持久的问题及其答案库，以备将来使用访问者将从中受益。您的原始问题已收到两个答案，它们一起构成一个整体，这是您与回答者合作完成的。请不要通过删除原始问题而使他们的努力无效。我们已将帖子回滚到其最后一个正确状态并删除赏金。如果您有新问题，请将其作为一个新问题提问，而不是完全替换旧问题。自您设置悬赏以来，您似乎一直在重复使用同一帖子来回答一系列问题…抱歉，但您不能只是重复使用问题帖子。我们正在建立一个永久性的问题及其答案库，供未来的访问者使用。您的原始问题已收到两个答案，它们一起构成一个整体，这是您与回答者合作完成的。请不要删除原始问题，从而使他们的努力无效。我们已将帖子回滚到其最后一个正确状态，并删除了赏金。

  <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>

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>;
}