React单按钮实现添加与编辑功能问题求助

问题现状 #

作为React初学者，我希望通过一个按钮同时实现员工记录的添加与编辑操作，但该功能无法正常运行。目前已完成记录添加、查看操作，点击表格行可将对应数据成功回填至表单，但编写的save方法逻辑存在问题，无法区分添加/编辑状态。

核心问题分析 #

1. 状态管理错误：currentEmployeeID 使用普通变量而非React状态，组件重渲染时会丢失当前编辑的员工ID。
2. 参数传递错误：save函数接收的是点击事件对象而非员工数据，导致users.id判断逻辑完全失效。
3. 缺少编辑请求逻辑：编辑分支仅弹出提示，未调用后端PUT接口更新数据。
4. 表单默认行为未阻止：按钮点击会触发表单默认提交，导致页面刷新。
5. 表格结构错误：循环生成多个<tbody>标签，不符合HTML规范。

修改后的完整代码 #

import axios from 'axios';
import { useEffect, useState } from "react";

function EmployeeLoad() {
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const [mobile, setMobile] = useState("");
  // 改用state存储当前编辑的员工ID
  const [currentEmployeeID, setCurrentEmployeeID] = useState(null);

  const [users, setUsers] = useState([]);

  useEffect(() => {
    Load();
  }, [])

  async function editEmployee(item) {
    setName(item.name);
    setAddress(item.address);
    setMobile(item.mobile);
    // 更新state存储当前编辑ID
    setCurrentEmployeeID(item.id);
    console.log(item.id);
  }

  async function Load() {
    const result = await axios.get("http://127.0.0.1:8000/api/employees");
    setUsers(result.data);
    console.log(result.data);
  }

  async function save(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    
    if (!currentEmployeeID) {
      // 添加逻辑
      await axios.post("http://127.0.0.1:8000/api/save", {
        name: name,
        address: address,
        mobile: mobile
      });
      alert("员工注册成功");
    } else {
      // 编辑逻辑：调用PUT接口（注意接口地址需和后端匹配）
      await axios.put(`http://127.0.0.1:8000/api/employees/${currentEmployeeID}`, {
        name: name,
        address: address,
        mobile: mobile
      });
      alert("员工信息更新成功");
    }
    // 重置表单与编辑状态
    setName("");
    setAddress("");
    setMobile("");
    setCurrentEmployeeID(null);
    // 重新加载员工列表，确保数据同步
    Load();
  }

  return (
    <div>
      <h1>员工信息管理</h1>
      <div className="container mt-4">
        <form onSubmit={save}>
          <div className="form-group">
            <label>员工姓名</label>
            <input
              type="text"
              className="form-control"
              id="employeeName"
              value={name}
              onChange={(event) => setName(event.target.value)}
            />
          </div>
          <div className="form-group">
            <label>员工地址</label>
            <input
              type="text"
              className="form-control"
              id="employeeAddress"
              value={address}
              onChange={(event) => setAddress(event.target.value)}
            />
          </div>

          <div className="form-group">
            <label>手机号码</label>
            <input
              type="text"
              className="form-control"
              id="employeeMobile"
              value={mobile}
              onChange={(event) => setMobile(event.target.value)}
            />
          </div>

          <button type="submit" className="btn btn-primary mt-4">
            {currentEmployeeID ? "更新员工" : "注册员工"}
          </button>
        </form>
      </div>

      <table className="table table-dark" align="center">
        <thead>
          <tr>
            <th scope="col">员工ID</th>
            <th scope="col">员工姓名</th>
            <th scope="col">员工地址</th>
            <th scope="col">手机号码</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          {users.map(item => (
            <tr key={item.id}>
              <th scope="row">{item.id}</th>
              <td>{item.name}</td>
              <td>{item.address}</td>
              <td>{item.mobile}</td>
              <td>
                <button
                  type="button"
                  className="btn btn-warning"
                  onClick={() => editEmployee(item)}
                >编辑</button>
                <button type="button" className="btn btn-dark">删除</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default EmployeeLoad;

关键修改说明 #

• 将currentEmployeeID改为React状态，确保组件重渲染时不会丢失编辑状态。
• save函数接收事件对象，调用e.preventDefault()阻止页面刷新。
• 根据currentEmployeeID是否存在判断添加/编辑逻辑，编辑时调用PUT接口更新数据（需确保后端接口地址匹配）。
• 操作完成后重置表单并重新加载员工列表，确保数据同步。
• 修正表格结构，将<tbody>放在循环外部，每个员工行使用唯一key。
• 按钮文本根据编辑状态动态切换，提升用户体验。

内容的提问来源于stack exchange，提问作者nanda kumar