React Web应用更新页面ID获取失败及跳转异常求助

问题1：更新页面URL中ID显示undefined #

原因 #

Studetn.js生成更新链接时错误使用data.ID，但后端返回的学生ID字段是student_id（从后端SQL查询SELECT student_id...可确认），导致无法获取正确ID值。

修复代码 #

修改Studetn.js中更新链接的生成逻辑：

// 原代码
{console.log("Generated Link:", `/Studetn/update/${data.ID}`)}
<Link to={`/update/${data.ID}`} className='btn btn-primary'>Update</Link>

// 修改后
{console.log("Generated Link:", `/update/${data.student_id}`)}
<Link to={`/update/${data.student_id}`} className='btn btn-primary'>Update</Link>

问题2：更新后无法跳转且数据未同步到数据库 #

原因 #

1. 前端请求路径不匹配：UpdateStudent.js中axios的PUT请求路径为/update/${id}，但后端定义的更新接口是/Studetn/update/:id，路径不一致导致请求失败，无法触发跳转。
2. 后端SQL条件错误：server.js更新接口的SQL语句中，where ID = ?使用了不存在的字段ID，数据库实际主键是student_id，导致无法更新数据。

修复代码 #

1. 修正UpdateStudent.js的请求路径

// 原代码
axios.put(`http://localhost:8081/update/${id}`, {first_name,last_name,date_of_birth,department})

// 修改后
axios.put(`http://localhost:8081/Studetn/update/${id}`, {first_name,last_name,date_of_birth,department})

2. 修正server.js的SQL语句

// 原代码
const sql = "update student set first_name = ?, last_name = ?, date_of_birth = ?, department = ? where ID = ?";

// 修改后
const sql = "update student set first_name = ?, last_name = ?, date_of_birth = ?, department = ? where student_id = ?";

可选优化：加载学生原有数据到更新页面

为提升用户体验，可在UpdateStudent.js中添加逻辑预填学生信息：

import axios from 'axios';
import React, { useState, useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom';

function UpdateStudent() {
    const [first_name,setfirst_name]= useState('')
    const [last_name,setlast_name]= useState('')
    const [date_of_birth,setdate_of_birth]= useState('')
    const [department,setdepartment]= useState('')
    const{id} = useParams();
    const navigate = useNavigate();

    // 新增：获取学生原有数据
    useEffect(() => {
        axios.get(`http://localhost:8081/student/${id}`)
        .then(res => {
            const student = res.data;
            setfirst_name(student.first_name);
            setlast_name(student.last_name);
            setdate_of_birth(student.date_of_birth);
            setdepartment(student.department);
        })
        .catch(err => console.log(err));
    }, [id]);

    function handleSubmit(event){
        event.preventDefault();
        axios.put(`http://localhost:8081/Studetn/update/${id}`, {first_name,last_name,date_of_birth,department})
        .then(res=>{
            console.log(res);
            navigate('/Studetn'); // 跳转到学生列表页，而非首页
        }).catch(err=> console.log(err));
    }

    // 其余代码不变
}

同时在server.js新增单个学生查询接口：

app.get("/student/:id", (req, res) => {
    const sql = "SELECT student_id, first_name, last_name, DATE_FORMAT(date_of_birth, '%Y-%m-%d') AS date_of_birth, department FROM student WHERE student_id = ?";
    const id = req.params.id;
    db.query(sql, [id], (err, data) => {
        if (err) return res.json(err);
        return res.json(data[0]);
    });
});

总结 #

完成上述修改后：

• 点击学生列表的更新按钮，URL会正确显示学生ID
• 提交更新后数据会同步到数据库，并自动跳转回学生列表页面
• 可选优化后，更新页面会预填学生原有信息，提升操作体验

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