Laravel開発でinertiaを使用してフロントエンドにReactを採用する場合、inertiaのuseFormヘルパーを活用する場面が多くあるかと思います。

今回は、そうした開発環境において

連続して記述したsetDataが上手く動作しないときの対処法（正しい記述方法）

をご紹介します。

【前提】useFormの宣言

前提として、今回は以下のような内容でuseFormの宣言をしていることとします。

const { data, setData } = useForm({
    title: iniTitle,
    status: iniStatus,
    dueDate: iniDueDate,
});

dataの値を一括更新するときのsetDataの「間違った」使い方

setDataを連続して使用する場合、以下のような書き方をしたくなります。

setData('title', newTitle);
setData('status', newStatus);
setData('dueDate', newDueDate);

しかし、実はこの書き方では最後のsetDataしか実行されず、全体としてのdataは正しく更新されません。

これはどうやらReactのstateの挙動によるもののようで、不具合ではないそうです。
■ 参考：https://sinar.blog/laravel-inertia-react-multiple-setdata/

dataの値を一括更新するときのsetDataの「正しい」使い方

正常に一括更新させるための正しい書き方は全部で３パターンあります。

ケケンタ

ひとつずつご紹介していきます！

パターン①

以下のように記述することで、dataオブジェクト内の特定のプロパティの値を更新することが可能です。

setData(data => ({...data, title: newTitle}));
setData(data => ({...data, status: newStatus}));
setData(data => ({...data, dueDate: newDueDate}));

...dataはjavascriptのスプレッド構文です。

例えば、上記のコードの1行目では

dataオブジェクトのtitleプロパティの値だけを更新した「新たなdataオブジェクト」をセットし直す

という動きをします。

スプレッド構文については公式ドキュメントをご覧ください。
■ 参考：スプレッド構文（MDN）

パターン②

以下のように記述すると、title、status、dueDateの各プロパティの値がひとまとめに更新されます。

setData(data => ({...data, 
    title: newTitle,
    status: newStatus,
    dueDate: newDueDate,
}));

理屈としてはパターン①のときと同じで

各プロパティ（title、status、dueDate）の値を更新した「新たなdataオブジェクト」をセットし直す

という動きをします。

ケケンタ

個人的には、パターン①よりも上記の書き方のほうが一括更新している様子がパッと見てわかりやすいので気に入っています。

パターン③

dataオブジェクトを完全に置き換えてしまっても問題が無ければ、以下のように書くことも可能です。

setData({
    title: newTitle,
    status: newStatus,
    dueDate: newDueDate,
});

このように書くと、dataオブジェクト内が完全に置き換わります。

例えば、上記３つのプロパティ（title、status、dueDate）の他に、updateDateという４つ目のプロパティがdataオブジェクトに存在していたとします。

この状態で上記のコードを実行すると、updateDateはundefined＝未定義に置き換わります。

ケケンタ

上記のようなsetData({ ... });という書き方でdataオブジェクトを更新するときは、この点にご注意ください！

まとめ

いかがだったでしょうか。

今回はinertiaのuseFormヘルパーをReactで利用しているときに、

連続して記述したsetDataが上手く動作しないときの対処法（正しい記述方法）

についてご紹介しました。

連続して記述したsetDataが上手く動作しない根本的な原因は、Reactのstateの仕様にあります（※不具合ではありません）。

要するに、オブジェクトが格納されているstateを更新するときは、「オブジェクト全体に対して更新をかける必要がある」ということですね。

そんなときに便利なのが、今回ご紹介したjavascriptのスプレッド構文です。

参考：スプレッド構文（MDN）

ケケンタ

僕も今回ご紹介したケースで時間を無駄に使ってしまった経験があります。

もし「コードは合ってるのに挙動がおかしい！」と思う場面に遭遇したときは、仕様をじっくり確認してみると根本解決できるかもしれません。

それでは、最後までご覧いただきありがとうございました！

当ブログではLaravelやPHPに関する情報も発信していますので、ご興味のある方はぜひほかの記事もご覧いただけるとうれしいです。

あわせて読みたい

【React】 条件によってクラス名（className）を動的に付与する方法【３パターン】 この記事では Reactで条件によってクラス名（className）を動的に付与する方法 を解説します。 動的にクラス名を付与することで、stateの値によって要素の見た目（装飾…

あわせて読みたい

【Laravel11】Gate（ゲート）とPolicy（ポリシー）で「認可」機能を実装する Webアプリでは、特定の機能を実行する権限があるかどうかをチェックするために「認可」という仕組みを利用します。 PHPのフレームワークであるLaravelには、この「認可…

あわせて読みたい

【Laravel11】シーダとファクトリでテストデータを一括作成する方法 Webアプリ開発をするときは、実際の画面表示やデータ処理の動きなどを確認するためにテストデータを作成する必要があります。 テストデータは手作業で入力していっても…