简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Tambahkan arahan "gunakan klien" di bahagian atas fail, TypeError: createContext hanya berfungsi untuk komponen klien
P粉811349112
P粉811349112 2023-10-25 22:01:11
0
2
880

Saya mencipta aplikasi Next.js serba baharu yang menggunakan folder app. Kemudian saya memasang UI Materiel dan mula menggunakan contoh yang diberikan dalam dokumentasi. Tetapi saya mendapat ralat ini:

Ralat jenis: createContext hanya berfungsi pada komponen klien. Tambahkan arahan "gunakan klien" di bahagian atas fail untuk menggunakannya.

Berikut ialah contoh dokumentasi dalam kod saya: 

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

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

Saya mahu butang ini dipaparkan pada halaman saya. Saya tahu menambahkan "use client" di bahagian atas akan membetulkan ralat, tetapi saya mahu halaman saya dipaparkan pada pelayan.

P粉811349112
P粉811349112

membalas semua(2)
P粉642436282
P粉6424362822023-10-26 13:18:31 Tingkat 2

Untuk menjadikan MUI berfungsi dengan sempurna dengan SSR, anda perlu membuat beberapa pelarasan: https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts.

Nota: Walaupun anda mengkonfigurasinya dengan betul, butang itu boleh dipaparkan di sebelah pelayan, tetapi anda tidak boleh menetapkan pengendali onClick (jika saya ingat dengan betul)

Suka +0
Tambah Balasan
P粉502608799
P粉5026087992023-10-26 00:38:54 Tingkat 1

Nampaknya butang yang anda import menggunakan cangkuk pelanggan, dalam kes ini createContext。为此，您需要在文件顶部添加“use client”. Tetapi ini bermakna halaman itu menjadi komponen pelanggan dan tidak berhenti menjadi komponen pelayan.

Jika ini mengganggu anda, anda boleh menambah fail app 同一级别创建一个 libmui.js dalam folder yang sama seperti seperti ini: 

// lib/mui.js

"use client";

export * from "@mui/material";

Kemudian anda mengimportnya dari sana (dengan cara ini seluruh halaman masih merupakan komponen pelayan): 

// app/page.js

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

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

Nota sampingan, anda mungkin menghadapi ralat yang sama semasa menyediakan konteks. Ini bermakna anda cuba untuk menetapkannya dalam komponen pelayan. Garis Panduan ialah menambah ini pada fail tag "Use Client" sendiri: 

// 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>
  );
}

dan import dari sana: 

// app/layout.js

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

Untuk jawapan yang lebih terperinci, lihat benang ini.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！