“對象作為 React 子對象是無效的。 如果您打算渲染一組子項，請改用數組。” 錯誤

Question

我正在嘗試將user對象作為我的 React Context.Provider的值傳遞給<UserContext.Provider value={user} /> 。 然而，React 不喜歡將對象作為子對象傳遞的想法。 這是我收到的錯誤消息：

錯誤：對象作為 React 子對象無效（找到：帶有鍵 {id, username, first_name, last_name, email, avatar} 的對象）。 如果您打算渲染一組子項，請改用數組。

我希望有人可以提供幫助。 這是我的 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

CodeSandbox： 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;