“对象作为 React 子级无效。如果您要渲染一组子级，请改用数组。”错误

Posted 2023-02-22

【中文标题】“对象作为 React 子级无效。如果您要渲染一组子级，请改用数组。”错误

【英文标题】："Objects are not valid as a React child. If you meant to render a collection of children, use an array instead." error

【发布时间】：2021-01-02 00:39:27

【问题描述】：

我正在尝试将 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>

【问题讨论】：

如果您有新问题，请将其作为新问题提出，而不是完全替换旧问题。自从您设置赏金以来，您似乎一直在针对一系列问题重复使用同一个帖子...

抱歉，您不能只回收问题帖子。我们正在建立一个持久的问题及其答案库，供未来的访问者从中受益。您的原始问题已收到两个答案，它们共同构成一个整体，这是您与回答者一起合作完成的。请不要通过删除原始问题来使 他们的 努力无效。我们已将帖子回滚到上次正确的状态并取消了赏金。

【参考方案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>;

【参考方案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>

App.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>
  );

UserState.js

import React from "react";

const UserState = React.createContext();

export default UserState;

export const  Consumer  = UserState;