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は正しく更新されません。
dataの値を一括更新するときのsetDataの「正しい」使い方
正常に一括更新させるための正しい書き方は全部で３パターンあります。
ケケンタひとつずつご紹介していきます！
パターン①
以下のように記述することで、dataオブジェクト内の特定のプロパティの値を更新することが可能です。
setData(data => ({...data, title: newTitle}));
setData(data => ({...data, status: newStatus}));
setData(data => ({...data, dueDate: newDueDate}));...dataはjavascriptのスプレッド構文です。
例えば、上記のコードの1行目では
dataオブジェクトのtitleプロパティの値だけを更新した「新たなdataオブジェクト」をセットし直す
という動きをします。
パターン②
以下のように記述すると、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のスプレッド構文です。
ケケンタ僕も今回ご紹介したケースで時間を無駄に使ってしまった経験があります。
もし「コードは合ってるのに挙動がおかしい！」と思う場面に遭遇したときは、仕様をじっくり確認してみると根本解決できるかもしれません。
それでは、最後までご覧いただきありがとうございました！
当ブログではLaravelやPHPに関する情報も発信していますので、ご興味のある方はぜひほかの記事もご覧いただけるとうれしいです。
コメント