客户端组件尚不支持async/await

Question

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { getPricingPage } from "@/sanity/queries/page";
import { WebsiteForm } from "@/components/sections";

export const PricingPage = async () => {
 const [open, setOpen] = useState(false);
 const data = await getPricingPage();
 const { hero, subscription, price } = data;
return (
 <>
   <div>
     <div className="flex flex-col space-y-6 items-center md:space-y-12">
       <Button onClick={() => setOpen(true)}>Click Me</Button>
     </div>
   </div>
   <WebsiteForm open={open} onOpenChange={setOpen} />
 </>
);
};

export default PricingPage;

我正在理智地构建这个 NextJs 应用程序，并且我正在尝试从 Sanity 获取数据，它之前工作得很好，但是后来，我添加了 useState 挂钩来打开 WebsiteForm，并且每次都会收到错误我单击按钮，显示“客户端组件尚不支持异步/等待，仅服务器组件支持。此错误通常是由于意外将

'use client'

添加到最初为服务器编写的模块而引起的。” 我确实理解该错误意味着什么，但修复它才是问题所在。 我们将非常感谢您的帮助。预先感谢。

Answer 1

如果您的

PricingPage

组件确实是 page 组件，我真的建议将其保留为服务器组件。这样您仍然可以使用服务器端获取和元数据生成。

在这种情况下，最好的选择是将渲染逻辑分离到另一个组件中，并将数据获取保留在页面组件中。这样，获取组件仍然是服务器组件，您可以在可视组件中管理状态。

基本上是这样的：

在

page.tsx

：

import { getPricingPage } from "@/sanity/queries/page";
import { PricingForm } from "./PricingForm";

export const PricingPage = async () => {
 const data = await getPricingPage();

 return (
   <PricingForm data={data} />
 );
};

export default PricingPage;

在

PricingForm.tsx

：

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { WebsiteForm } from "@/components/sections";

export const PricingForm = async ({ data }) => {
 const [open, setOpen] = useState(false);
 const { hero, subscription, price } = data;

 return (
   <>
     <div>
       <div className="flex flex-col space-y-6 items-center md:space-y-12">
         <Button onClick={() => setOpen(true)}>Click Me</Button>
       </div>
     </div>
     <WebsiteForm open={open} onOpenChange={setOpen} />
   </>
 );
};