実現したいこと
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> ); };
よろしくお願いいたします。
App に渡している isSuccess には特別意味はなく、「外部から来る真偽値」を再現したかっただけになります。
このソースは暫定ですが、実際には App で API リクエストを送信して、そのレスポンスによって state を書き換えている感じです。このソースではレスポンス結果を擬似的に isSuccess でやっています。
> 「外部から来る真偽値」を再現したかっただけになります。
最初に<App isSuccess={false} />と固定してしまっているので変化の余地もないのが現状のコードです。
最初に<App isSuccess={false} /> とした場合、App では setOn(false)が呼ばれ、その on を Child に渡しているので、Child のボタンをクリックした際に text は "false" であってほしいのですが、"true"が表示されます。
これは App での setOn(false) の更新を待たずに、Child に on が渡っているという事かなと思っており、その辺りをお伺いしたかった感じです。
ソース読みづらくてすみません。
回答1件
あなたの回答
tips
プレビュー