質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

2488閲覧

Next.jsでUseContextでuseStateを定義し、子コンポーネントで値を更新した値を、別URLでも参照(更新後の値を参照)することは可能でしょうか?

ssasq

総合スコア1

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/04/02 09:30

編集2021/04/02 12:24

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/04/02 18:57

別 URL とはどこにあって、どうやって遷移してますか?
guest

回答2

0

自己解決

こちら解決しました!遷移時にリロードされていることが原因だったようです。

投稿2021/04/03 02:12

ssasq

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

next.jsのページ間の値の受け渡しについての記事がヒントになると思います。

投稿2021/04/03 01:44

seastar3

総合スコア2287

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問