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

Question

Ich habe eine brandneue Next.js-Anwendung erstellt, die den App-Ordner verwendet. Dann habe ich MaterielUI installiert und begonnen, die in der Dokumentation angegebenen Beispiele zu verwenden. Aber ich erhalte diese Fehlermeldung: TypeError: createContext funktioniert nur für Client-Komponenten. Fügen Sie oben in der Datei eine „useclient“-Anweisung hinzu, um sie zu verwenden. Hier ist ein Beispiel für die Dokumentation in meinem Code: importButtonfrom"@mui/material/Button";exportdefaultfun

P粉642436282 · Answer

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

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

P粉502608799 · Answer

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

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

// lib/mui.js

"use client";

export * from "@mui/material";

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

// app/page.js

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

export default function Home() {
  return (
    
      
    
  );
}

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

// app/theme-provider.tsx

"use client";

import { createContext } from "react";

export const ThemeContext = createContext("");

export default function ThemeProvider({ children }) {
  return (
    
      {children}
    
  );
}

并从那里导入它：

// app/layout.js

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

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

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial