React Hooks useState() を使ってオブジェクトを扱う：チュートリアル

React Hooks useState() をオブジェクトと使用する方法

React Hooks の useState() は、コンポーネント内で状態を管理するための便利なツールです。これは単純な値だけでなく、オブジェクトも管理できます。

基本的な使い方

1. オブジェクト型の初期値を定義します。
2. useState() フックを使って、状態変数と更新関数を生成します。
3. 状態変数をテンプレートリテラルで展開し、オブジェクトの各プロパティにアクセスします。
4. 更新関数は、オブジェクト全体を新しいオブジェクトで置き換えるか、個々のプロパティを更新するために使用できます。

例

const initialName = {
  firstName: '',
  lastName: '',
};

const [name, setName] = useState(initialName);

const handleChange = (event) => {
  const { name, value } = event.target;
  setName((prevState) => ({
    ...prevState,
    [name]: value,
  }));
};

<input
  type="text"
  name="firstName"
  value={name.firstName}
  onChange={handleChange}
/>
<input
  type="text"
  name="lastName"
  value={name.lastName}
  onChange={handleChange}
/>

注意点

• オブジェクトの状態を更新する際は、オブジェクト全体を新しいオブジェクトで置き換えるか、...prevState を使って前の状態をスプレッドする必要があります。
• 個々のプロパティのみを更新したい場合は、スプレッド構文とオブジェクトリテラルを組み合わせて、更新したいプロパティのみを上書きする必要があります。

import React, { useState } from 'react';

const App = () => {
  const initialName = {
    firstName: '',
    lastName: '',
  };

  const [name, setName] = useState(initialName);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setName((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  return (
    <div>
      <h1>名前入力</h1>
      <input
        type="text"
        name="firstName"
        value={name.firstName}
        onChange={handleChange}
      />
      <input
        type="text"
        name="lastName"
        value={name.lastName}
        onChange={handleChange}
      />
      <p>
        名前: {name.firstName} {name.lastName}
      </p>
    </div>
  );
};

export default App;

• name 状態変数は、initialName オブジェクトで初期化されます。
• handleChange 関数は、入力欄に入力された値を取得し、setName 関数を使って name 状態変数を更新します。

実行結果

ブラウザでこのコードを実行すると、名前を入力できるフォームが表示されます。入力欄に入力した内容が、下の 名前: 欄に反映されます。

このサンプルコードは基本的な例です。実際のユースケースに合わせて、コードをアレンジしてください。

オブジェクトの更新方法

オブジェクト全体を新しいオブジェクトで置き換える

setName({
  firstName: 'John',
  lastName: 'Doe',
});

個々のプロパティのみを更新する

setName((prevState) => ({
  ...prevState,
  firstName: 'John',
}));

スプレッド構文とオブジェクトリテラルを組み合わせる

setName((prevState) => ({
  ...prevState,
  ...{
    firstName: 'John',
  },
}));

useReducer フックを使う

より複雑な状態管理には、useReducer フックを使うことができます。

Immutable.js ライブラリを使う

オブジェクトの状態を不変にするには、Immutable.js ライブラリを使うことができます。

• オブジェクト全体を頻繁に更新する場合は、1. の方法が簡単です。
• 個々のプロパティのみを更新する場合は、2. または 3. の方法が効率的です。

上記以外にも、オブジェクトの状態を更新する方法はいくつかあります。

• setState 関数を使う
• クラスコンポーネントを使う

これらの方法は、useState フックを使うよりも複雑です。

useState フックを使ってオブジェクトの状態を更新するには、いくつかの方法があります。どの方法を使うべきかは、ユースケースによって異なります。