Next.js 13 エラーを修正: React-redux コンテキストがありません; <Provider> 内でコンポーネントをラップしてください
P粉269847997
P粉269847997 2023-08-16 15:42:17
0
1
489
<p>redux からのデータを使用したいのですが、このエラーを解決できません。そこで、next.js 13 にアプリケーションルーターがあり、/settings/account の自分のページにアクセスしたいと考えています。これは私のファイル構造です: </p> <pre class="brush:php;toolbar:false;">--アプリ - 設定 レイアウト.jsx ページ.jsx - アカウント ページ.jsx layout.jsx</pre> <p>アカウント ページのユーザー データにアクセスしたい:</p> <pre class="brush:php;toolbar:false;">「react」から React をインポート import { useSelector } から 'react-redux'; デフォルト関数 AccountPage() をエクスポート { const {info: userInfo} = useSelector(state => state.user); const {名前、id} = ユーザー情報; console.log(名前, ID) 戻る ( <div>ページ</div> ) }</pre> <p>しかし、エラーが発生しました:<em>エラー: 反応 Redux コンテキスト値が見つかりませんでした。コンポーネントがプロバイダーでラップされていることを確認してください</em>。レイアウトを使用してページをラップすれば問題は解決すると思い、次のようにしました。 </p> <pre class="brush:php;toolbar:false;">layout.jsx 「クライアントを使用する」 import { ストア } から "@/context/store"; import { Provider } から「react-redux」; デフォルト関数のエクスポート AccountLayout({ Children }) { 戻る ( <プロバイダストア={ストア}> {子供たち} </プロバイダー> ) }</pre> <p>残念ながら、これは役に立ちません。設定/アカウント ページと設定ページのレイアウトは同じですが、SettingsLayout という名前が異なるだけです (ルート レイアウトでこの問題は解決すると思いました)。設定ページに関しては、プレーンな HTML のみが含まれており、コードは含まれていません。 <code>App</code> コンポーネントをラップせずにこの問題を解決するにはどうすればよいですか? </p>
P粉269847997
P粉269847997

全員に返信(1)
P粉515066518

これはテスト済みの方法です;

redux-provider.js という名前の新しいファイルをアプリケーション フォルダーに追加します。 リーリー

provider.tsx という名前の別のファイルをアプリケーション フォルダーに追加し、ReduxProvider を実装します。 リーリー

layout.tsx ファイルにプロバイダーを実装します

(アプリケーション フォルダーの直接のサブコンポーネント) リーリー

これで、他のページからストアにアクセスできるようになりました。

更新

###はい。しかし!ルート コンポーネントを ReduxProvider でラップしても、他のすべてのコンポーネントがクライアント コンポーネントになるわけではありません。サーバー コンポーネントは引き続き使用できます。どうやってするの?

experiment という名前の新しいフォルダーをアプリケーション フォルダーの下に追加し、その下に page.tsx という名前の新しいファイルを追加します。 page.tsx ファイルの内容を別のファイルからインポートできます。

/実験/page.tsx

リーリー

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート