ReactのuseStateフックで可変長を使う方法

以下に、可変長の状態を扱うためのいくつかの方法を示します。

配列を使った可変長状態の管理: useStateフックを使って配列を状態として保持することで、可変長のデータを管理することができます。以下は、配列を使った可変長の文字列リストの例です。

import React, { useState } from 'react';
function MyComponent() {
  const [list, setList] = useState([]);
  const addItem = () => {
    setList([...list, 'new item']);
  };
  return (
    <div>
      <button onClick={addItem}>アイテム追加</button>
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

この例では、useStateフックを使って空の配列を初期状態として持ち、addItem関数を使って新しいアイテムを配列に追加しています。

オブジェクトを使った可変長状態の管理: 配列だけでなく、オブジェクトを使っても可変長の状態を管理することができます。以下は、オブジェクトを使った可変長の文字列リストの例です。

import React, { useState } from 'react';
function MyComponent() {
  const [state, setState] = useState({ list: [] });
  const addItem = () => {
    setState({ list: [...state.list, 'new item'] });
  };
  return (
    <div>
      <button onClick={addItem}>アイテム追加</button>
      <ul>
        {state.list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

この例では、useStateフックを使ってオブジェクトを初期状態として持ち、addItem関数を使って新しいアイテムをオブジェクトの配列に追加しています。

useReducerフックの使用: useStateフックではなく、useReducerフックを使うこともできます。useReducerフックは、複雑な状態管理を行う際に便利です。以下は、useReducerフックを使った可変長の文字列リストの例です。

import React, { useReducer } from 'react';
function reducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return { list: [...state.list, action.payload] };
    default:
      throw new Error();
  }
}
function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { list: [] });
  const addItem = () => {
    dispatch({ type: 'ADD_ITEM', payload: 'new item' });
  };
  return (
    <div>
      <button onClick={addItem}>アイテム追加</button>
      <ul>
        {state.list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

この例では、useReducerフックを使ってアイテムの追加を処理するreducer関数を定義し、dispatch関数を使ってアクションを発行しています。

これらの方法は、ReactのuseStateフックを使って可変長の状態を管理するためのいくつかの一般的な手法です。それぞれの例では、状態の更新方法や表示方法が異なることに注意してください。

この記事では、ReactのuseStateフックを使って可変長の状態を管理する方法と、それに関連するコード例を紹介しました。これにより、コンポーネント内で動的な状態を効果的に管理できるようになります。