Next.jsでUseContextで定義し、子コンポーネントで値を更新した値を、別URLでも参照(更新後の値)することは可能でしょうか?
contextを用いて、子コンポーネントへの値の渡しは、できたのですが、別URLに値を渡す方法がわかりません...
UseContextは、URLが違うページに更新した値を渡すことはできないのでしょうか?
試してみた現状のソースです????
以下のソースで行ってること、行いたいことをようやくすると次の通りです。
useContextでuseState「初期値」を定義
contextで囲われた子コンポーネントAを通じて、useContextで定義したuseStateを変更「変更したよ」に変更。
contextで囲われた別の子コンポーネントBにて、contextの値を取得すると「初期値」が表示される。。。
ここで、子コンポーネントAで変更した「変更したよ」を表示したいです!
[contextでuseStateを定義】
import React,{ createContext, useState } from "react"; export const UserContext = createContext({}); export const UserProvider = props => { const { children } = props; const [context, setContext] = useState("初期値"); return ( <UserContext.Provider value={{ context,setContext }}> {children} </UserContext.Provider> ) }
【contextで囲で、子コンポーネントでcontextの値を更新できるようにする】
import Form from "../../../components/Form"; import {UserProvider} from "../../../../context" import React from "react" function form() { return ( <UserProvider> <Form/> </UserProvider> ); } export default form;
【子コンポーネントである「Form」でステートを更新】
import React, { useContext } from "react"; import {UserContext} from "../../context"; const Contact = (props) => { const keke = useContext(UserContext) keke.setContext("変更したよ") console.log(keke.context) //「変更したよ」が表示され、stateが更新されている return ( //ここは省略 ); }; export default Contact;
【Resultコンポーネントに、更新した値を渡したいと思い、上記と同じcontextで囲んでみた】
import { UserProvider } from "../../../../context"; import Result from "../../../components/Result"; const result = () => { return ( <UserProvider> <Result /> </UserProvider> ); }; export default result;
【上記のFormコンポーネントで更新したusecontextをResultコンポーネントでも使えると思ったもののできない...】
import React,{useState,useEffect,useContext} from "react" import {UserContext} from "../../context"; const Result = () => { const keke = useContext(UserContext) console.log(keke.context) //「初期値」が表示され、取得したい「更新したよ」が取得できなかった。更新した値を別URLでも取得できるようにしたいです return ( //ここは省略 }; export default Result
回答2件
あなたの回答
tips
プレビュー