Q&A
実現したいこと
React学習中で、アプリの作成をしています。
useContextで渡したstateの値を、受け取り先のコンポーネントで更新したいと考えております。
前提
Index.jsxというファイル上で作成したuseStateをuseContextを使用して別のコンポーネントへ渡し、受け取ったコンポーネント上でstateの更新を行いたいと考えています。
更新を行う際に格納したい値は、item変数に入っているオブジェクトの数を数えて、その数字を入れたいと考えています。
itemはユーザーの操作次第で入っているオブジェクトの数が変わるので、変わるたびに数を検知してその数をstateに格納したいです。
調べながら書き方を変えて試しているのですが、うまくいく方法が見つかりません。
ソースコードなどをみて、なにかおわかりになる方がいらっしゃいましたらご教授いただきたいです。
発生している問題・エラーメッセージ
該当のソースコードに記載してあるコードを実行した場合は以下のエラーメッセージが表示されます。
setFavNumber is not a function
該当のソースコード
index.jsx
1export const NumberContext = createContext(); 2 3const App = () => { 4 const [number, setNumber] = useState(); 5 const value = { number, setNumber }; 6 7 return ( 8 <NumberContext.Provider value={value}> 9 <React.StrictMode> 10 <RouterProvider router={router} /> 11 </React.StrictMode> 12 </NumberContext.Provider> 13 ); 14}; 15 16const rootElement = document.getElementById("root"); 17ReactDOM.createRoot(rootElement).render(<App />); 18 19export default NumberContext;
component
1const { favNumber, setFavNumber } = useContext(NumberContext); 2 useEffect(() => { 3 setFavNumber(item.length); 4}, [item]);
試したこと
ソースコードではvalue変数に{ number, setNumber }を格納しているのですが、NumberContext.Providerのvalueに直接{ number, setNumber }を挿入してみたのですが、結果は同じでした。
該当のソースコードから、どのように修正すれば受け取り先のコンポーネントで値の更新を行うことができるのか、なにかお分かりになる方がいらっしゃいましたら教えていただけると幸いです。
よろしくお願いいたします。
回答1件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/01 04:28