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

kiayqfof 于 2023-01-04 发布在 Java

关注(0)|答案(1)|浏览(154)

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

我已经在互联网和堆栈溢出周围寻找，但没有找到答案。任何帮助将不胜感激。

JavaScript

来源：https://stackoverflow.com/questions/74981049/error-objects-are-not-valid-as-a-react-child-in-the-app-directory-of-next-js

1条答案

按热度按时间

nhhxz33t1#

如果您继续浏览文档，您会看到他们谈到了渲染（客户端组件中的服务器组件）时的限制：
然而，在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 />
    </>
  );
}

相反，您可以将服务器组件作为客户端组件的子组件或属性传递。为此，可以将这两个组件 Package 在另一个服务器组件中。例如：
x一个一个一个一个x一个一个二个x
按照这些准则，在您的情况下，应该将Comments作为children传递给Post，如下所示：
一个三个三个一个

赞(0）回复(0）举报 2023-01-04

我来回答

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

1条答案

相关问题

热门标签

最新问答