“对象作为 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 }) {

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

}

和

function Avatar({ user }) {

  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 

// children, use an array instead.

<Consumer>

{(ctx) => (

<>

 {ctx.user}

</>

)

</Consumer>

应用程序.js

import React from "react";

import UserState, { Consumer } from "./UserState";

const Avatar = ({ user }) => (

  <>

    <div>{user.username}</div>

    <div>{user.age}</div>

  </>

);

const UserData = () => {

  return (

    <Consumer>

      {(ctx) => (

        <>

          {ctx.user && (

            <>

              <Avatar user={ctx.user} />

            </>

          )}

        </>

      )}

    </Consumer>

  );

};

export default function App() {

  const userState = {

    user: {

      username: "hi",

      age: 18

    }

  };

  return (

    <UserState.Provider value={userState}>

      <UserData />

    </UserState.Provider>

  );

}

用户状态.js

import React from "react";

const UserState = React.createContext({});

export default UserState;

export const { Consumer } = UserState;