ReactでDB操作(動作編)

こんにちは。
なかにしです。

引き続きReact × DBをやっていきます。

前回は概要編でしたので、今回は動作編となります。

動作
ファイル構成
コード
さいごに
参考

動作

json-serverで構築したJsonファイルを簡易DBとし、動作確認をしていきます！
今回は「DB読込」「DB更新」の2種類のボタンを用意しました。

本来のDBと同様、「DB読込」をするとデータが読み込まれ、「DB更新」をすると変更箇所がDBに保存されます。

▽DB読込
更新せずに再読み込みしている為、データが変更前に戻っています。

▽DB更新
更新ボタンを押すと、json(DB)の値が更新されています。

ファイル構成

▽DBとして「db.json」、DBの起動を楽にする為「json-server.json」を作成。
「Table.tsx」にテーブルコンポーネントを作成し、「App.tsx」でインポートして表示します。

コード

{
  "members": [
    {
      "id": "1",
      "name": "Tanaka",
      "age": "25",
      "note": "とても良い人です。"
    },
    {
      "id": "2",
      "name": "Nakanishi",
      "age": "10",
      "note": "ちょっとヤバい人です。"
    },
    {
      "id": "3",
      "name": "Okamura",
      "age": "8",
      "note": "超絶クレーマーです。"
    },
    {
      "id": "4",
      "name": "Shima",
      "age": "29",
      "note": ""
    },
    {
      "id": "5",
      "name": "Abe",
      "age": "42",
      "note": "ベテラン"
    },
    {
      "id": "6",
      "name": "Nakano",
      "age": "99",
      "note": "天才"
    },
    {
      "id": "7",
      "name": "Tanaka",
      "age": "23",
      "note": ""
    }
  ]
}

{
  "watch": true,
  "port": 3100
}

import "./App.css";
import Table from "./Table";

function App() {
  return (
    <div className="App">
      <Table />
    </div>
  );
}

export default App;

import React, { useState, useEffect } from "react";
import axios, { AxiosResponse } from "axios";
import { CSSProperties } from "react";

const Table = () => {
  // テーブルのスタイル設定
  const border: number = 1;
  const borderCollaps: CSSProperties = {
    borderCollapse: "collapse",
  };
  const thStyle: CSSProperties = {
    minWidth: "150px",
  };

  // モックサーバーのURL
  const membersUrl = "http://localhost:3100/members";

  type Member = {
    id: string;
    name: string;
    age: string;
    note?: string;
  };

  // GETでデータの取り込み、membersにセット
  const [members, setMembers] = useState<Member[]>([]);

  const reloadDB = async () => {
    const response: AxiosResponse<Member[]> = await axios.get(membersUrl);
    setMembers(response.data);
  };

  // 初回データの取り込み、第二引数に[]を指定して最初の一回のみ動作させる
  useEffect(() => {
    reloadDB();
    console.log("初期読込完了！");
  }, []);

  // 再読込の処理
  const loadDB = () => {
    reloadDB();
    alert("再読込しました。");
  };

  const changeName = (e: any, index: number) => {
    const beforeName = [...members];
    beforeName[index].name = e.target.value;
    setMembers(beforeName);
  };

  const changeAge = (e: any, index: number) => {
    const beforeAge = [...members];
    beforeAge[index].age = e.target.value;
    setMembers(beforeAge);
  };

  const changeNote = (e: any, index: number) => {
    const beforeNote = [...members];
    beforeNote[index].note = e.target.value;
    setMembers(beforeNote);
  };

  const updateDB = () => {
    console.log(members);
    for (let i = 0; i < members.length; i++) {
      const id = members[i].id;
      const json = members[i];

      axios.put(membersUrl + "/" + id, json).catch((error) => {
        console.error(error);
      });
    }
    alert("更新完了しました！");
  };

  return (
    <div>
      <button onClick={() => loadDB()}>DB読込</button>
      <button onClick={() => updateDB()}>DB更新</button>
      <table border={border} style={borderCollaps}>
        <thead>
          <tr>
            <th style={thStyle}>ID</th>
            <th style={thStyle}>Name</th>
            <th style={thStyle}>Age</th>
            <th style={thStyle}>Note</th>
          </tr>
        </thead>
        <tbody>
          {members.map((member: Member, index: number) => (
            <tr key={index}>
              <td>{member.id}</td>
              <td>
                <input
                  value={member.name}
                  onChange={(e) => changeName(e, index)}
                />
              </td>
              <td>
                <input
                  value={member.age}
                  onChange={(e) => changeAge(e, index)}
                />
              </td>
              <td>
                <input
                  value={member.note}
                  onChange={(e) => changeNote(e, index)}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;