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

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

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

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

Q&A

解決済

1回答

523閲覧

【React】state の値を引数に渡す際に、値の更新を行ってから渡したい

moragad

総合スコア7

React.js

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

0グッド

0クリップ

投稿2023/03/29 11:07

実現したいこと

state を更新して props で渡した際に、更新前の state の値が渡ってしまうのですが、更新した state の値を適切に子コンポーネントに渡す手法を教えていただきたいです。

前提

codesandbox で事象を再現してみました。
実際には api の取得に成功したかどうかのフラグを state で持ち、その結果を子コンポーネントに渡して、子コンポーネントではそのフラグを見て処理を分岐したい、というようなものになります。
codesandbox ではそのまま真偽値を渡しています。

該当のソースコード

ボタンをクリックした結果が false であってほしい

import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const rootElement = document.getElementById("root")!; const root = ReactDOM.createRoot(rootElement); root.render( <React.StrictMode> <App isSuccess={false} /> </React.StrictMode> );
import { useEffect, useState } from "react"; import { Child } from "./Child"; import "./styles.css"; export default function App(isSuccess: boolean) { const [on, setOn] = useState<boolean>(true); useEffect(() => { if (isSuccess) { setOn(true); } else { // ここでfalseをセットしているので、子コンポーネントにもfalseを渡したい setOn(false); } }, []); return ( <div className="App"> <Child isSuccess={on} /> </div> ); }
import { useState } from "react"; export const Child = (isSuccess: boolean) => { const [text, setText] = useState<string>(""); const onClick = () => { if (isSuccess) { setText("true"); } else { setText("false"); } }; return ( <div> <button onClick={onClick}>on</button> <p>{text}</p> </div> ); };

よろしくお願いいたします。

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

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

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

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

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

maisumakun

2023/03/29 11:38

isSuccessをそのまま渡さずにonというstateを立てている理由はどのようなものでしょうか?
hoshi-takanori

2023/03/29 16:14

App や Child の isSuccess プロパティ受け取れてないのでは…。
moragad

2023/03/30 01:21 編集

App に渡している isSuccess には特別意味はなく、「外部から来る真偽値」を再現したかっただけになります。 このソースは暫定ですが、実際には App で API リクエストを送信して、そのレスポンスによって state を書き換えている感じです。このソースではレスポンス結果を擬似的に isSuccess でやっています。
maisumakun

2023/03/30 01:36

> 「外部から来る真偽値」を再現したかっただけになります。 最初に<App isSuccess={false} />と固定してしまっているので変化の余地もないのが現状のコードです。
moragad

2023/03/30 01:44

最初に<App isSuccess={false} /> とした場合、App では setOn(false)が呼ばれ、その on を Child に渡しているので、Child のボタンをクリックした際に text は "false" であってほしいのですが、"true"が表示されます。 これは App での setOn(false) の更新を待たずに、Child に on が渡っているという事かなと思っており、その辺りをお伺いしたかった感じです。 ソース読みづらくてすみません。
guest

回答1

0

ベストアンサー

App での setOn(false) の更新を待たずに、Child に on が渡っているという事かなと思っており、その辺りをお伺いしたかった感じです。

単純に、propの受け取り方が違います。propは、与えたprop名をキーとしたオブジェクト1つとして渡されますので、まるごとifに投入すればtrue側の判定に向かいます。


そして、コメントにも書きましたが、propで一意に決まるstateは作るべきではありません。そのままpropを使って条件分岐してください(ontextも全く余計なstateです)。

投稿2023/03/30 01:54

maisumakun

総合スコア144995

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

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

moragad

2023/03/30 02:25

なるほどです。ご回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

React.js

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