React项目中<input>组件Value编辑时不更新问题求助

输入框无法修改的核心问题是状态与输入框值的绑定不匹配：

• 输入框的value绑定的是student对象中的属性（比如student.fname）
• 但onChange事件里更新的是独立的状态变量（比如setFname）
  这就导致输入框显示的内容始终停留在接口返回的student初始值，不会随输入更新。

有两种可行的修复方式，选一种即可：

方案一：统一使用student状态管理所有字段 #

这种方式不需要单独的fname、lname等状态，直接维护student对象：

import React, {useEffect, useState} from "react";
import Sidebar from "../components/Sidebar";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {useNavigate, useParams} from "react-router-dom";
import axios from "axios";

function CourseEdit() {
    let navigate = useNavigate();
    const [student, setStudent] = useState({});
    const {id} = useParams();

    const editStudent = (id) => {
        axios.put('http://localhost:3001/student_edit', {
            ...student,
            id: id,
        }).then(() => {
            alert('Student updated');
            navigate(`../students/detail/${id}`);
            console.log("student updated");
        });
    }

    useEffect(() => {
        axios.get(`http://localhost:3001/students/${id}`).then((response) => {
            setStudent(response.data[0]);
        })},[id]);

    // 通用的字段更新函数
    const handleInputChange = (field, value) => {
        setStudent(prev => ({...prev, [field]: value}));
    }

    return (
        <div className="grid-container">
            <Sidebar/>
            <div className="main_content grid-2">
                <div className="details">
                    <div className="icon" style={{color: "#f7931e"}}>
                        <FontAwesomeIcon icon="user"/> Edit STUDENT
                        <div className="back-button" onClick={() => navigate(-1)}>
                            <FontAwesomeIcon icon="arrow-alt-circle-left"/>BACK
                        </div>
                    </div>
                    <div className="detail-content" style={{marginTop: "1.2em"}}>
                        <table>
                            <tbody>
                            <tr>
                                <td className="td-left" style={{width: "100%"}}>
                                    <label htmlFor="StudentName">Student First Name:</label>
                                </td>
                                <td className="td-right" style={{width: "85%"}}>
                                    <input className="mb" type="text" name="studentFname" id="detail_input"
                                           value={student.fname || ''} onChange={(event) => {
                                        handleInputChange('fname', event.target.value)
                                    }} required/>
                                </td>
                            </tr>
                            <tr>
                                <td className="td-left" style={{width: "100%"}}>
                                    <label htmlFor="StudentName">Student Last Name:</label>
                                </td>
                                <td className="td-right" style={{width: "85%"}}>
                                    <input className="mb" type="text" name="studentLname" id="detail_input"
                                           onChange={(event) => {
                                               handleInputChange('lname', event.target.value)
                                           }} value={student.lname || ''} required/>
                                </td>
                            </tr>
                            {/* 其他字段同理修改 */}
                            </tbody>
                        </table>

                        <div>
                            <button className="green_bt option_list round mr" onClick={() => {editStudent(`${id}`)}}>Save
                            </button>
                            <button className="red_bt option_list round mr" onClick={() => navigate(-1)}>Cancel
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    )
}

export default CourseEdit;

关键改动：

• 删除单独的fname、lname等状态，统一用student对象
• 新增handleInputChange函数，通过字段名动态更新student对象
• 输入框的value绑定student.fname，同时添加|| ''避免初始渲染时出现undefined
• 提交时直接解构student对象传参

方案二：初始化独立状态为接口返回值，输入框绑定独立状态 #

这种方式保留单独的状态变量，但需要在接口返回数据时同步初始化这些状态：

import React, {useEffect, useState} from "react";
import Sidebar from "../components/Sidebar";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {useNavigate, useParams} from "react-router-dom";
import axios from "axios";

function CourseEdit() {
    let navigate = useNavigate();

    const [fname, setFname] = useState("");
    const [lname, setLname] = useState("");
    const [gender, setGender] = useState("");
    const [age, setAge] = useState("");
    const [description, setDescription] = useState("");
    const [payment, setPayment] = useState("0");

    const {id} = useParams();

    const editStudent = (id) => {
        axios.put('http://localhost:3001/student_edit', {
            fname: fname,
            lname: lname,
            gender: gender,
            age: age,
            description: description,
            payment: payment,
            id: id,
        }).then(() => {
            alert('Student updated');
            navigate(`../students/detail/${id}`);
            console.log("student updated");
        });
    }

    useEffect(() => {
        axios.get(`http://localhost:3001/students/${id}`).then((response) => {
            const studentData = response.data[0];
            // 同步初始化所有独立状态
            setFname(studentData.fname);
            setLname(studentData.lname);
            setGender(studentData.gender);
            setAge(studentData.age);
            setDescription(studentData.description);
            setPayment(studentData.payment);
        })},[id]);

    return (
        <div className="grid-container">
            <Sidebar/>
            <div className="main_content grid-2">
                <div className="details">
                    <div className="icon" style={{color: "#f7931e"}}>
                        <FontAwesomeIcon icon="user"/> Edit STUDENT
                        <div className="back-button" onClick={() => navigate(-1)}>
                            <FontAwesomeIcon icon="arrow-alt-circle-left"/>BACK
                        </div>
                    </div>
                    <div className="detail-content" style={{marginTop: "1.2em"}}>
                        <table>
                            <tbody>
                            <tr>
                                <td className="td-left" style={{width: "100%"}}>
                                    <label htmlFor="StudentName">Student First Name:</label>
                                </td>
                                <td className="td-right" style={{width: "85%"}}>
                                    <input className="mb" type="text" name="studentFname" id="detail_input"
                                           value={fname} onChange={(event) => {
                                        setFname(event.target.value)
                                    }} required/>
                                </td>
                            </tr>
                            <tr>
                                <td className="td-left" style={{width: "100%"}}>
                                    <label htmlFor="StudentName">Student Last Name:</label>
                                </td>
                                <td className="td-right" style={{width: "85%"}}>
                                    <input className="mb" type="text" name="studentLname" id="detail_input"
                                           onChange={(event) => {
                                               setLname(event.target.value)
                                           }} value={lname} required/>
                                </td>
                            </tr>
                            {/* 其他字段同理，value绑定对应的独立状态 */}
                            </tbody>
                        </table>

                        <div>
                            <button className="green_bt option_list round mr" onClick={() => {editStudent(`${id}`)}}>Save
                            </button>
                            <button className="red_bt option_list round mr" onClick={() => navigate(-1)}>Cancel
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    )
}

export default CourseEdit;

关键改动：

• 在useEffect接口请求成功后，用返回数据初始化所有独立状态
• 输入框的value绑定对应的独立状态（比如fname），而非student.fname

额外提示：代码里重复导入了Axios和axios，可以删掉其中一个，保持导入一致。

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