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

Question

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

错误：对象作为 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 }) {&nbsp; return <Nav.Link href="/users/login">{user}</Nav.Link>;}和function Avatar({ user }) {&nbsp; return <Nav.Link href="/users/login">{user.something}</Nav.Link>;}

Answer 2

代码沙盒： https://codesandbox.io/s/trusting-rubin-7rcc8很可能您正在尝试像这样呈现上下文，这会导致错误，而不是解构上下文/用户对象。// this results in// Objects are not valid as a React child (found: object with// keys {username, age}). If you meant to render a collection of&nbsp;// children, use an array instead.<Consumer>{(ctx) => (<>&nbsp;{ctx.user}</>)</Consumer>应用程序.jsimport React from "react";import UserState, { Consumer } from "./UserState";const Avatar = ({ user }) => (&nbsp; <>&nbsp; &nbsp; <div>{user.username}</div>&nbsp; &nbsp; <div>{user.age}</div>&nbsp; </>);const UserData = () => {&nbsp; return (&nbsp; &nbsp; <Consumer>&nbsp; &nbsp; &nbsp; {(ctx) => (&nbsp; &nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {ctx.user && (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Avatar user={ctx.user} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; </Consumer>&nbsp; );};export default function App() {&nbsp; const userState = {&nbsp; &nbsp; user: {&nbsp; &nbsp; &nbsp; username: "hi",&nbsp; &nbsp; &nbsp; age: 18&nbsp; &nbsp; }&nbsp; };&nbsp; return (&nbsp; &nbsp; <UserState.Provider value={userState}>&nbsp; &nbsp; &nbsp; <UserData />&nbsp; &nbsp; </UserState.Provider>&nbsp; );}用户状态.jsimport React from "react";const UserState = React.createContext({});export default UserState;export const { Consumer } = UserState;