错误：对象在 Next.js 的应用程序目录中作为 React 子项无效

Question

我开始将我的 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>;
}

我查看了 Inte.net 和 Stack Overflow，但没有找到答案。 任何帮助，将不胜感激。

Answer 1

如果您继续阅读文档，您会看到他们在谈到 Render（客户端组件中的服务器组件）时谈到了一个限制：

但是，在 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 />
    </>
  );
}

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

'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>
  );
}

按照这些准则，在您的情况下，您应该将Comments作为children项传递给Post ，如下所示：

"use client";

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

export default Post;

<Post>
  <Comments/>
</Post>