【React】1回のイベントでオブジェクト型のstateの複数のプロパティを更新する

2021年10月23日2022年4月12日

URLをコピーしました！

この記事ではタイトル通り「1回のイベントでオブジェクト型のstateの複数のプロパティを更新する」方法をまとめます。

完全に個人的な備忘録ですが、誰かの役にたてば嬉しいなという思いもあって残しておきます。

state（useState含む）については別に記事にも書いています。

1回のイベントでオブジェクト型のstateの複数のプロパティを更新する方法

以下のような画面で説明します。

実装したい仕様は以下。

value1、value2、value3のテキストフォームに値を入力する
その状態で「state一括更新」ボタンを押す
ボタンを押すとオブジェクト型のstate（valueList）のvalue1、value2、value3のプロパティにテキストフォームの入力値で更新する
「state（valueList）の値」の下にはstateの各プロパティの値を表示するのでそこにテキストフォームの入力値を表示する

まず、うまくいく実装から書きます。（わかりやすいように敢えて冗長に書いている箇所もあります）

import { useState } from "react";

type ValueList = {
  value1: string;
  value2: string;
  value3: string;
};

export default function App() {
  // オブジェクト型のstateを定義
  const [valueList, setValueList] = useState<ValueList>({
    value1: "",
    value2: "",
    value3: "",
  });

  const handleClick = () => {
    const inputValue1 = (document.getElementById("value1") as HTMLInputElement).value;
    const inputValue2 = (document.getElementById("value2") as HTMLInputElement).value;
    const inputValue3 = (document.getElementById("value3") as HTMLInputElement).value;
    setValueList({
      ...valueList,
      value1: inputValue1,
      value2: inputValue2,
      value3: inputValue3,
    });
  };

  return (
    <>
      <div>
        <span style={{ marginRight: "5px" }}>value1</span>
        <input id="value1" />
      </div>
      <div>
        <span style={{ marginRight: "5px" }}>value2</span>
        <input id="value2" />
      </div>
      <div>
        <span style={{ marginRight: "5px" }}>value3</span>
        <input id="value3" />
      </div>
      <div style={{ marginTop: "10px" }}>
        <button onClick={handleClick}>state一括更新</button>
      </div>
      <div>
        <p>state（ValueList）の値</p>
        <p>value1:{valueList.value1}</p>
        <p>value2:{valueList.value2}</p>
        <p>value3:{valueList.value3}</p>
      </div>
    </>
  );
}

state更新の部分はhandleClickの以下です。

  setValueList({
    ...valueList,
    value1: inputValue1,
    value2: inputValue2,
    value3: inputValue3,
  });

スプレッド構文で更新したプロパティと値をカンマ区切りで複数設定するだけです。

実際にこのような動作になります。

ちゃんとstateが一括で更新されているのが分かります。

いざ実装方法がわかれば全然難しくないのですが、スプレッド構文は第二引数までしか持てないという謎の先入観があったので以下のようなコードを書いてつまずきました…

  const handleClick = () => {
    const inputValue1 = (document.getElementById("value1") as HTMLInputElement).value;
    const inputValue2 = (document.getElementById("value2") as HTMLInputElement).value;
    const inputValue3 = (document.getElementById("value3") as HTMLInputElement).value;
    setValueList({ ...valueList, value1: inputValue1 });
    setValueList({ ...valueList, value2: inputValue2 });
    setValueList({ ...valueList, value3: inputValue3 });
  };

このように1つずつset関数で更新するとこうなります。

なぜこのようなことになってしまうのかというとstateが更新されるタイミングに関係します。

では以下のようにレンダリング時のタイミング、「state一括更新」ボタンを押したタイミングに実行される位置にconsole.logを入れた感じで書いてみます。

import { useState } from "react";

type ValueList = {
  value1: string;
  value2: string;
  value3: string;
};

export default function App() {
  // オブジェクト型のstateを定義
  const [valueList, setValueList] = useState<ValueList>({
    value1: "",
    value2: "",
    value3: ""
  });

  // 追加
  console.log('レンダリングします！！')

  const handleClick = () => {
    const inputValue1 = (document.getElementById("value1") as HTMLInputElement)
      .value;
    const inputValue2 = (document.getElementById("value2") as HTMLInputElement)
      .value;
    const inputValue3 = (document.getElementById("value3") as HTMLInputElement)
      .value;
    setValueList({ ...valueList, value1: inputValue1 });
　　 // 追加
    console.log(valueList);
    setValueList({ ...valueList, value2: inputValue2 });
    // 追加
    console.log(valueList);
    setValueList({ ...valueList, value3: inputValue3 });
  };

  return (
    <>
      <div>
        <span style={{ marginRight: "5px" }}>value1</span>
        <input id="value1" />
      </div>
      <div>
        <span style={{ marginRight: "5px" }}>value2</span>
        <input id="value2" />
      </div>
      <div>
        <span style={{ marginRight: "5px" }}>value3</span>
        <input id="value3" />
      </div>
      <div style={{ marginTop: "10px" }}>
        <button onClick={handleClick}>state一括更新</button>
      </div>
      <div>
        <p>state（valueList）の値</p>
        <p>value1:{valueList.value1}</p>
        <p>value2:{valueList.value2}</p>
        <p>value3:{valueList.value3}</p>
      </div>
    </>
  );
}

この状態で再度「state一括更新ボタン」を押すとコンソールにはこのような表示になります。