Next.js 错误：尽管没有使用，但 React 客户端组件不支持 async/await - “使用客户端”导致问题”

Question

我有一个在我的 React 应用程序中充当菜单的组件。组件代码如下：

// AdminMenu.tsx
'use client'
import { ScrollArea } from "@radix-ui/react-scroll-area";
import Menuheader from "./menu_header";
import { usePage } from "../context/currentPageContext";
import {
    Card,
    CardContent,
    CardDescription,
    CardFooter,
    CardHeader,
    CardTitle,
} from "./ui/card";

class MenuItem {
    title: string;
    desc: string;
    pageSelector: string;

    constructor(title: string, desc: string, pageSelector: string) {
        this.title = title;
        this.desc = desc;
        this.pageSelector = pageSelector;
    }
}

const menuItemList = [
    new MenuItem('Analytics', 'View an overview of your analytics here', 'viewAnalyticsPage'),
    new MenuItem('Orders', 'Manage customer orders here.', 'manageOrdersPage'),
    new MenuItem('Products', 'Update your product selection here', 'manageProductsPage'),
    new MenuItem('Notification Center', 'View your notifications here', 'viewNotificationsPage'),
    new MenuItem('Blog', 'Add a blog post here', 'manageBlogPage'),
    new MenuItem('Workshops', 'Manage your workshops here', 'manageWorkshopsPage'),
    new MenuItem('Customers', 'View customers here', 'manageCustomersPage')
];

const AdminMenuSetup = () => {
    const { pageType, setPageType } = usePage();

    const handleCardClick = (pageSelector: any) => {
        setPageType(pageSelector);
    };

    return (
        <ScrollArea className='mt-2 min-h-full'>
            {menuItemList.map((item, index) => (
                <div key={index} onClick={() => handleCardClick(item.pageSelector)}>
                    <Card className={`ml-2 mr-2 mb-2 hover:bg-gray-100 hover:cursor-pointer ${pageType === item.pageSelector ? 'bg-gray-100' : ''}`}>
                        <CardHeader>
                            <CardTitle>{item.title}</CardTitle>
                            <CardDescription>{item.desc}</CardDescription>
                        </CardHeader>
                    </Card>
                </div>
            ))}
        </ScrollArea>
    );
};

const AdminMenu = () => {
    return (
        <div className='w-full min-h-screen flex flex-grow flex-col flex-1 bg-white'>
            <AdminMenuSetup />
        </div>
    );
};

export default AdminMenu;

当我单击其中一张卡片时，我收到以下错误：

---

错误：客户端组件尚不支持 async/await，仅服务器组件支持。此错误通常是由于意外地将“使用客户端”添加到最初为服务器编写的模块而引起的。

---

---

我检查了我的代码，没有使用async/await。我还尝试删除 UI 组件（ScrollArea 和 Card）来隔离问题，但问题仍然存在。

这是我的上下文提供程序代码：

// currentPageContext.tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';

interface PageContextValue {
  pageType: string;
  setPageType: React.Dispatch<React.SetStateAction<string>>;
}

const PageContext = createContext<PageContextValue | undefined>(undefined);

interface PageProviderProps {
  children: ReactNode;
}

export const PageProvider: React.FC<PageProviderProps> = ({ children }) => {
  const [pageType, setPageType] = useState('manageOrders');

  return (
    <PageContext.Provider value={{ pageType, setPageType }}>
      {children}
    </PageContext.Provider>
  );
};

export const usePage = (): PageContextValue => {
  const context = useContext(PageContext);
  if (!context) {
    throw new Error('usePage must be used within a PageProvider');
  }
  return context;
};

我要强调的是，调用 onClick() 函数时会抛出错误。

我很感激任何有关我可能遇到此错误的原因的见解，因为我没有直接在代码中使用 async/await。

Answer 1

看来您的 usePage 组件是服务器端的。并且客户端支持useContext。 next-redux-docs。您也可以将服务器端组件导入客户端。

在 usePage 组件中添加 use client 应该可以修复该错误。