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

Question

実現したいこと

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>
  );
};

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

Comments

[maisumakun]

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

[hoshi-takanori]

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

[moragad]

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

[maisumakun]

> 「外部から来る真偽値」を再現したかっただけになります。

最初に<App isSuccess={false} />と固定してしまっているので変化の余地もないのが現状のコードです。

[moragad]

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

Answer 1

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

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

---

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

Comments

[moragad]

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