ReactとMUIでのセレクトボックス実装例と課題解決

2025年2月17日

URLをコピーしました！

ReactとMUI（Material-UI）を活用して、ここではユーザーを選択するセレクトボックスを実装する際に直面する課題と、その解決方法を解説します。
特に、編集モードで前回選択したユーザーを初期値として表示しつつ、すべてのユーザーを一覧に含める方法を具体例を交えて説明します。

実装の背景

アプリケーションの管理画面では、登録済みのユーザーをセレクトボックスで選択できる機能が求められることがあります。
このとき、以下の要件を満たす必要があります。

新規登録時には、セレクトボックスにすべてのユーザーを表示
編集時には、前回選択されたユーザーを初期値として表示

以下は、これらの要件を満たすためのReactコンポーネントの例です。

実装例

import React, { useEffect, useState } from "react";

import Box from '@mui/material/Box';

import InputLabel from '@mui/material/InputLabel';

import MenuItem from '@mui/material/MenuItem';

import FormControl from '@mui/material/FormControl';

import Select, { SelectChangeEvent } from '@mui/material/Select';

// ユーザーデータ型定義

interface UserSettingData {

id: number;

user_name: string;

}

type Props = {

user: UserSettingData | null;

setUser: React.Dispatch<React.SetStateAction<UserSettingData | null>>;

};

const UserSelect: React.FC<Props> = ({ user, setUser }) => {

const [userData, setUserData] = useState<UserSettingData[]>([]);

// ユーザーデータを取得

useEffect(() => {

const fetchUsers = async () => {

// APIリクエストの模擬例

const result = await fetch("/api/users").then(res => res.json());

setUserData(result);

};

fetchUsers();

}, []);

const handleChange = (event: SelectChangeEvent) => {

const selectedUser = userData.find(u => u.id === Number(event.target.value));

setUser(selectedUser || null);

};

return (

<InputLabel id="user-select-label">ユーザーを選択</InputLabel>

<Select

labelId="user-select-label"

id="user-select"

value={user ? String(user.id) : ""}

onChange={handleChange}

{userData.map((u) => (

{u.user_name}

</MenuItem>

))}

</Select>

</FormControl>

</Box>

);

};

export default UserSelect;

解説

初期化処理
- useEffectを使用してコンポーネントの初期マウント時にAPIからユーザーデータを取得します。
- 結果をuserDataステートに保存します。
選択処理
- ユーザーを選択した際に、選択されたIDに基づいてuserステートを更新します。
初期値の設定
- 編集モードでuserが設定されている場合、そのIDをセレクトボックスの初期値として表示します。

よくある問題とその対策

編集モードで前回選択したユーザーしか表示されない

原因: APIリクエストにおいて、編集対象のユーザー情報だけをフィルタリングして取得している場合、セレクトボックスにすべてのユーザーが表示されません。
解決策: APIリクエストで条件を絞り込みすぎないようにし、すべてのユーザーを取得するようにします。
また、取得データを元に、選択状態を適切に管理します。