Pythonを用いて、ReactでDB参照の動的ドロップダウンを生成する方法を紹介します。
DB関連処理の実装
DB関連処理の実装方法は下記参照
バックエンドの実装
ドロップダウン作成用のrouterを定義します。
その中で、DBデータを取得→responseで返却する処理を実装します。
@app.route('/get-list', methods=['GET'])
def get_list():
try:
# データベースからリストを取得
rows = /* DBから取得する処理 */
if not rows:
return jsonify({"message": "データが見つかりません", "data": []}), 404
# データを id と name に格納し直す
formatted_data = [{"id": row[0], "name": row[1]} for row in rows]
# データを JSON 形式で返す
return jsonify({"message": "データ取得成功", "data": formatted_data}), 200
except Exception as e:
print(traceback.format_exc())
return jsonify({"message": f"エラーが発生しました: {e}"}), 500フロントエンドの実装
jsで下記処理を追加します。
- バックエンドからresponseを取得する処理を定義
- 画面表示時に1.の処理を実行
- ドロップダウン選択時にvalueを書き換え
次に、selectタグで上記で取得したデータをセットします。
import React, { useState, useEffect } from "react";
function App() {
const [dataList, setDataList] = useState([]); // データリストの状態を管理
const [error, setError] = useState(null); // エラーメッセージを管理
const [selectedItem, setSelectedItem] = useState(""); // 選択されたアイテムを管理
const fetchData = async () => {
try {
// 1.バックエンドで定義したrouterを指定してresponseを取得
const response = await fetch("http://localhost:5000/get-list");
const result = await response.json();
if (response.ok) {
setDataList(result.data); // データを状態に保存
} else {
setError(result.message); // エラーメッセージを保存
}
} catch (err) {
setError("データの取得中にエラーが発生しました");
}
};
// 2.表示時にデータを取得
useEffect(() => {
fetchData();
}, []);
// 3.ドロップダウンの選択変更時の処理
const handleSelectChange = (event) => {
setSelectedItem(event.target.value);
};
return (
<React.Fragment>
<div>
<table>
<thead>
<tr>
<th>ドロップダウン</th>
<td>
<select id="data-dropdown" value={selectedItem} onChange={handleSelectChange}>
<option value="">選択してください</option>
{dataList.map((item) => (
<option key={item.id} value={item.id}>
{item.name}
</option>
))}
</select>
</td>
</tr>
</thead>
</table>
</div>
</React.Fragment>
);
}