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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Recoil

Recoilは、Meta社が開発しているReactの状態管理ライブラリです。状態を管理するAtom、Atomに格納された状態を取得するSelectorという2つの主機能を持ちます。同じく状態管理ライブラリであるReduxと比べて構造が分かりやすく扱いやすい点が特徴です。

Q&A

1回答

1142閲覧

recoilで非同期処理の完了を待ちたい

takadaimiku

総合スコア76

Next.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Recoil

Recoilは、Meta社が開発しているReactの状態管理ライブラリです。状態を管理するAtom、Atomに格納された状態を取得するSelectorという2つの主機能を持ちます。同じく状態管理ライブラリであるReduxと比べて構造が分かりやすく扱いやすい点が特徴です。

0グッド

0クリップ

投稿2023/03/19 15:19

実現したいこと

recoilでdefultのhelloではなくgood morningをログに出力したい

前提

next.jsでrecoilを使用してステートの管理を行っています。
setTestで値を書き換えた直後にconsole.log(test)としても書き換える以前の値が出力されます。
これはsetTestが非同期処理の為だと思いますが、setTestが実行されたことを確認してからconsole.log(test)を実行する方法をご存じの方は教えていただけませんでしょうか。

該当のソースコード

javaScript

1import { useEffect } from 'react' 2import { useRecoilState } from 'recoil' 3import { atom } from 'recoil'; 4 5const testState = atom<string>({ 6 key: 'testState', 7 default: "hello", 8 }); 9 10export default function Home() { 11 const [test , setTest ] = useRecoilState(testState) 12 useEffect(()=>{ 13 setTest("Good morning") 14 console.log(test) 15 },[]) 16 return ( 17 <> 18 <h1>Hello World!</h1> 19 </> 20 ) 21} 22

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

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

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

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

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

hoshi-takanori

2023/03/19 18:50

何がしたいかよく分かりませんが、"Good morning" を直接 (または一旦変数に入れて) 出力すれば良いのでは。または、useEffect の外で出力するとか。
takadaimiku

2023/03/20 00:07

Good morningを出力するプログラムを作ることが目的ではありません。 あくまでこれは例で、実現したいことの本質はrecoilにセットした値を使用するプログラムを作りたい、です。
guest

回答1

0

タイトルにあるように処理を待つことはできないような気がします。
(私も勉強不足で知らないだけな可能性があるので、ご存じの方がいらっしゃればコメントでご指摘いただきたいです

setTestで値を書き換えた直後にconsole.log(test)としても書き換える以前の値が出力されます。
これはsetTestが非同期処理の為だと思いますが、setTestが実行されたことを確認してからconsole.log(test)を実行する方法をご存じの方は教えていただけませんでしょうか。

どちらかというと、Reactのstate周りの仕様で、
stateが更新されてから(setTestが呼ばれてから)次にtestがレンダリングされるタイミングまでは元々の値を返すような仕様となっているためです。ドキュメント中ではsnapshot的な振る舞いをすると書かれています。

そのため、setした直後にconsole.logをしたとしても、値が反映されていないような値が返ってきます。

recoilもこれに倣っているため、useSetRecoilStateの実行直後にconsoleで値を確認しても値が反映されていないような挙動となってしまっています。

React docs

解決策とするならば、
実際に値をブラウザに表示することでデバッグは可能となると思います。

jsx

1const testState = atom<string>({ 2 key: 'testState', 3 default: "hello", 4 }); 5 6export default function Home() { 7 const [test , setTest ] = useRecoilState(testState) 8 useEffect(()=>{ 9 setTest("Good morning") 10 },[]) // 初回レンダリング時にsetするように書かれているので、 11 return ( 12 <> 13 <h1>Hello World!</h1> 14 <p>{test}</p> {/** ここでtestを表示してあげる */} 15 </> 16 ) 17}

投稿2023/03/20 09:54

編集2023/03/20 09:57
uky

総合スコア227

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問