suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Fügen Sie die Anweisung „use client“ oben in der Datei hinzu. TypeError: createContext funktioniert nur für Client-Komponenten

Ich habe eine brandneue Next.js-Anwendung erstellt, die den Ordner app verwendet. Dann habe ich Materiel UI installiert und begonnen, die in der Dokumentation aufgeführten Beispiele zu verwenden. Aber ich bekomme diesen Fehler:

Typfehler: createContext funktioniert nur auf Client-Komponenten. Fügen Sie oben in der Datei die Anweisung „Client verwenden“ hinzu, um ihn zu verwenden.

Hier ist ein Beispiel für die Dokumentation in meinem Code: 

import Button from "@mui/material/Button";

export default function Home() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

Ich möchte, dass dieser Button auf meiner Seite angezeigt wird. Ich weiß, dass das Hinzufügen von "use client" oben den Fehler behebt, aber ich möchte, dass meine Seite auf dem Server gerendert wird.

P粉811349112P粉811349112402 Tage vor903

Antworte allen(2)Ich werde antworten

  • P粉642436282

    P粉6424362822023-10-26 13:18:31

    要让 MUI 与 SSR 完美配合，您需要做一些调整：https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts 。

    注意：即使您配置正确，按钮也可以在服务器端呈现，但您无法分配 onClick 处理程序（如果我没记错的话）

    Antwort
    0
  • P粉502608799

    P粉5026087992023-10-26 00:38:54

    显然，您要导入的按钮正在使用客户端挂钩，在本例中为createContext。为此，您需要在文件顶部添加“use client”。但这意味着该页面成为客户端组件，并且没有不再是服务器组件。

    如果这让您烦恼，您可以在与 app 同一级别创建一个 lib 文件夹，在其中添加 mui.js< /code> 文件，如下所示：

    // lib/mui.js

"use client";

export * from "@mui/material";

    然后您从那里导入它（这样，页面的其他部分仍然是服务器组件）：

    // app/page.js

import { Button } from "../lib/mui";

export default function Home() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

    旁注，您在设置上下文时可能会遇到类似的错误。这意味着您正在尝试在服务器组件中设置它。 指南是将其添加到其自己的“使用客户端”标记文件中：

    // app/theme-provider.tsx

"use client";

import { createContext } from "react";

export const ThemeContext = createContext("");

export default function ThemeProvider({ children }) {
  return (
    <ThemeContext.Provider value="dark">
      {children}
    </ThemeContext.Provider>
  );
}

    并从那里导入它：

    // app/layout.js

import ThemeProvider from './theme-provider';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

    要获得更详细的答案，请查看此 线程。

    Antwort
    0
  • StornierenAntwort