実現したいこと
React学習中で、アプリを作成しております。
ルーティングを設定しているindex.jsxというファイル上で、useStateを使用したいです。
前提
すべてのページのルーティングを設定しているファイルであるindex.jsxでuseStateを作成し、useContextで別コンポーネントへ渡すことで、別コンポーネントからでもuseContextの更新を行いたいと思っております。
発生している問題
ソースコードにあるようにuseStateを記述したいと考えていたのですが、コンポーネント内ではないためかレンダリングができず画面が真っ白になってしまいます。
このような部分では、どのように記述すればuseStateが使えるのでしょうか?
JavascriptとReactは学習中のため記述方法の知識に乏しく、どのように解決すれば良いのかがわからなかったので、もしおわかりになるようでしたらご教授いただけないでしょうか。
ソースコードにある以下のコードは、useContextを使用できるかどうかを試すために書いたものです。
const favNumber = 10; const NumberContext = createContext(favNumber);
該当のソースコード
React
1import React, { createContext, useEffect, useState } from "react"; 2import ReactDOM from "react-dom/client"; 3〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 4 5const router = createBrowserRouter([ 6 { 7 path: "/", 8 element: <Layout />, 9 children: [ 10 { index: true, element: <TopPage /> }, 11〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 12 ], 13 }, 14]); 15 16const favNumber = 10; 17const NumberContext = createContext(favNumber); 18 19const [number, setNumber] = useState(); 20 21const rootElement = document.getElementById("root"); 22ReactDOM.createRoot(rootElement).render( 23 <NumberContext.Provider value={favNumber}> 24 <React.StrictMode> 25 <RouterProvider router={router} /> 26 </React.StrictMode> 27 </NumberContext.Provider> 28); 29 30export default NumberContext; 31
試したこと
ソースコードのuseStateを記述している部分に、新たにコンポーネントを作成してその中にuseStateを記述したりもしてみたのですが、その新たに作成したコンポーネントをどのように記述して呼び出せばいいのかがよくわからず、うまく動作するような記述方法は見つかりませんでした。
この部分でuseStateを使えるようにするためにはどのように記述すればよいのかがお分かりになる方がいらっしゃいましたら、教えていただけると幸いです。
よろしくお願いいたします。
回答2件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/01 01:23