React项目Update按钮无法调用API加载数据的问题求助

一、当前代码核心问题 #

1. Update按钮未触发API请求：点击按钮仅执行setData将数据存入localStorage，没有调用API获取单条员工详情；且Link包裹按钮会导致页面跳转优先级高于onClick逻辑，交互混乱。
2. API路径错误：
   • 注释的updateData函数中，URL用了占位符:Employee_id未替换为真实ID，回调里update.data是未定义变量。
   • onDelete函数的删除请求同样使用占位符，未传入实际员工ID，导致删除接口调用失败。

二、分步修复 #

1. 修复Read页面Update按钮逻辑

移除Link对按钮的包裹，改为在setData后通过navigate跳转，也可选择先调用API获取详情再跳转：

// 替换原Update按钮代码
<Table.Cell> 
  <Button onClick={() => {
    setData(data);
    // 可选：提前获取员工详情存入localStorage，供Update页面使用
    // axios.get(`http://localhost:5000/emp/${data.Employee_id}`)
    //   .then(res => {
    //     localStorage.setItem('Employee Detail', JSON.stringify(res.data));
    //     navigate('/update');
    //   })
    navigate('/update');
  }}>Update</Button>
</Table.Cell>

2. 修复删除接口路径错误

将占位符替换为实际员工ID，同时增加错误捕获便于排查：

const onDelete = (Employee_id) => {
  axios.delete(`http://localhost:5000/emp/${Employee_id}`)
  .then(() => {
    getData();
  })
  .catch(err => console.error('删除失败:', err));
}

3. Update页面实现（核心：获取数据并填充表单）

在/update对应组件中，通过localStorage获取ID，调用API拉取详情并填充到表单字段：

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Form, Button } from 'semantic-ui-react';
import { useNavigate } from 'react-router-dom';

export default function Update() {
  const navigate = useNavigate();
  const [employee, setEmployee] = useState({
    Employee_name: '',
    Employee_id: '',
    Employee_address: '',
    Employee_post: ''
  });

  useEffect(() => {
    const empId = localStorage.getItem('Employee ID');
    if (empId) {
      axios.get(`http://localhost:5000/emp/${empId}`)
        .then(res => {
          setEmployee(res.data);
        })
        .catch(err => console.error('获取详情失败:', err));
    }
  }, []);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setEmployee(prev => ({ ...prev, [name]: value }));
  };

  const handleUpdate = () => {
    axios.put(`http://localhost:5000/emp/${employee.Employee_id}`, employee)
      .then(() => {
        navigate('/read');
      })
      .catch(err => console.error('更新失败:', err));
  };

  return (
    <Form>
      <Form.Field>
        <label>Employee Name</label>
        <input 
          name="Employee_name" 
          value={employee.Employee_name} 
          onChange={handleChange} 
        />
      </Form.Field>
      <Form.Field>
        <label>Employee ID</label>
        <input 
          name="Employee_id" 
          value={employee.Employee_id} 
          disabled
        />
      </Form.Field>
      <Form.Field>
        <label>Employee Address</label>
        <input 
          name="Employee_address" 
          value={employee.Employee_address} 
          onChange={handleChange} 
        />
      </Form.Field>
      <Form.Field>
        <label>Employee Position</label>
        <input 
          name="Employee_post" 
          value={employee.Employee_post} 
          onChange={handleChange} 
        />
      </Form.Field>
      <Button onClick={handleUpdate}>Save Update</Button>
    </Form>
  );
}

三、额外优化建议 #

• 改用useParams传递ID替代localStorage（更符合React Router规范）：
  • Read页面跳转：navigate(/update/${data.Employee_id})
  • Update页面获取ID：const { id } = useParams();
• 给列表渲染的Table.Row添加key属性：<Table.Row key={data.Employee_id}>
• 所有API请求增加错误捕获，方便调试

内容的提问来源于stack exchange，提问作者Aman Pradhan