Betulkan ralat Next.js 13: Konteks react-redux tiada; sila bungkus komponen dalam <Provider>
P粉269847997
2023-08-16 15:42:17
<p>Saya mahu menggunakan data daripada redux tetapi tidak dapat menyelesaikan ralat ini. Jadi, saya mempunyai penghala aplikasi dalam next.js 13 dan saya mahu mengakses halaman saya di /setting/akaun. Ini ialah struktur fail saya: </p>
<pre class="brush:php;toolbar:false;">--app
--tetapan
susun atur.jsx
page.jsx
--akaun
page.jsx
susun atur.jsx</pre>
<p>Saya mahu mengakses data pengguna pada halaman akaun:</p>
<pre class="brush:php;toolbar:false;">import React daripada 'react'
import { useSelector } daripada 'react-redux';
eksport fungsi lalai AccountPage() {
const {info: userInfo} = useSelector(state => state.user);
const {nama, id} = userInfo;
console.log(nama, id)
kembali (
<div>halaman</div>
)
}</pre>
<p>Tetapi saya mendapat ralat:<em>Ralat: tidak dapat mencari nilai konteks react-redux, sila pastikan komponen itu dibungkus dalam Pembekal</em>. Saya fikir menggunakan reka letak untuk membungkus halaman akan menyelesaikan masalah, jadi saya melakukan ini: </p>
<pre class="brush:php;toolbar:false;">layout.jsx
"gunakan pelanggan"
import { kedai } daripada "@/context/store";
import { Provider } daripada "react-redux";
eksport fungsi lalai AccountLayout({ kanak-kanak }) {
kembali (
<Kedai pembekal={kedai}>
{anak-anak}
</Pembekal>
)
}</pre>
<p>Malangnya, ini tidak membantu. Susun atur halaman tetapan/akaun dan halaman tetapan adalah sama, cuma dengan nama yang berbeza - SettingsLayout (saya fikir susun atur akar akan menyelesaikan masalah ini). Bagi halaman tetapan, ia hanya mengandungi HTML biasa, tiada kod.
Bagaimanakah saya boleh menyelesaikan masalah ini tanpa membalut komponen <code>App</code> </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini adalah kaedah yang diuji;
Tambahkan fail baharu yang dipanggil redux-provider.js di bawah folder aplikasi anda
"use client"; import { PropsWithChildren } from "react"; import { Provider } from "react-redux"; import { store } from "../store/store"; // 请调整路径 export default function ReduxProvider({ children }: PropsWithChildren<any>) { return ( <Provider store={store}> {children} </Provider> ); }Tambahkan fail lain yang dipanggil provider.tsx di bawah folder aplikasi anda dan laksanakan ReduxProvider
"use client"; import { PropsWithChildren } from "react"; import ReduxProvider from "./redux-provider"; export default function Providers({ children }: PropsWithChildren<any>) { return ( <ReduxProvider> {children} </ReduxProvider> ); }Laksanakan Pembekal dalam fail susun atur.tsx anda (subkomponen langsung folder apl)
import React from "react"; import Providers from './provider'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body> <Providers> {children} </Providers> </body> </html> ); }Kini kita boleh mengakses kedai dari halaman lain.
Dikemas kini
Ya. tetapi! Membungkus komponen akar dalam ReduxProvider tidak bermakna semua komponen lain adalah komponen klien. Anda masih boleh mempunyai komponen pelayan. Bagaimana hendak melakukannya?
Tambah folder baharu bernama eksperimen di bawah folder aplikasi anda, kemudian tambahkan fail baharu bernama page.tsx di bawah folder percubaan. Anda boleh mengimport kandungan fail page.tsx daripada fail lain.
/percubaan/page.tsx
import HomePage from "../index"; // 这是一个在其中使用redux的客户端组件 export default async function Page() { // 这是一个服务器组件 return <HomePage />; }