Error: Objects are not valid as a React child in the app directory of Next.js

小能豆

Error: Objects are not valid as a React child in the app directory of Next.js

javascript

我开始将我的一个 Next.js 应用程序迁移到版本 13。我想将目录app与服务器和客户端组件一起使用。文档说：

服务器和客户端组件可以交错在同一组件树中。在幕后，React 将合并两个环境的工作。

但是我的以下尝试因这个错误而失败：

错误：对象作为 React 子项无效（找到：[object Promise]）。如果您想要渲染子项集合，请改用数组。

"use client";

import Comments from "./Comments";

const Post = () => {
  return (
    <div>
      <p>This is a post</p>
      <Comments />
    </div>
  );
};

export default Post;
export default async function Comments() {
  const res = await fetch("https://jsonplaceholder.typicode.com/comments");
  return <div></div>;
}

阅读 49

2024-06-16

共1个答案

小能豆

如果您继续阅读文档，您就会看到他们讨论了在客户端组件内呈现服务器组件时的限制：

然而，在 React 中，在客户端组件内导入服务器组件存在限制，因为服务器组件可能包含仅限服务器的代码（例如数据库或文件系统实用程序）。

例如，在客户端组件中导入服务器组件将不起作用：

'use client';

// ❌ This pattern will not work. You cannot import a Server
// Component into a Client Component
import ServerComponent from './ServerComponent';

export default function ClientComponent() {
  return (
    <>
      <ServerComponent />
    </>
  );
}

相反，您可以将服务器组件作为客户端组件的子组件或 prop 传递。您可以通过将两个组件包装在另一个服务器组件中来实现这一点。例如：

'use client';

export default function ClientComponent({children}) {
  return (
    <>
      {children}
    </>
  );
}
// ✅ This pattern works. You can pass a Server Component
// as a child or prop of a Client Component.
import ClientComponent from "./ClientComponent";
import ServerComponent from "./ServerComponent";

// Pages are Server Components by default
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  );
}

遵循这些指导原则，对于您的情况，您应该将Commentsas传递children给Post，如下所示：

"use client";

const Post = ({ children }) => {
  return (
    <div>
      <p>This is a post</p>
      {children}
    </div>
  );
};

export default Post;
<Post>
  <Comments/>
</Post>

2024-06-16