React中API数据填充表单无法编辑的问题解决

问题根源 #

你的代码里有两个关键问题导致API一直覆盖表单字段：

• useEffect依赖错误：把student放进了依赖数组，每次输入框修改触发setStudent更新state时，都会重新执行useEffect调用API拉取数据，直接覆盖掉你输入的内容。
• 初始状态类型不匹配：用数组[]作为student的初始值，但实际student是单个对象，初始化为空对象{}更合理，避免渲染时访问属性出现undefined。

修改后的代码 #

import { useParams, useEffect, useState } from 'react';

function EditStudent() {
  let params = useParams();
  // 初始值改为空对象，匹配单个学生数据的结构
  const [student, setStudent] = useState({});

  // 只在studentId变化时调用API，避免重复触发
  useEffect(() => {
    API.getStudentDetails(params.studentId).then(setStudent);
  }, [params.studentId]); // 依赖改为params.studentId

  function editStudent(e) {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    API.editStudent(student).then(result => {
      if (result) {
        alert("Estudiante modificado");
      }
    });
  }

  return (
    <>
      <div>Editar alumno {student.dni}</div>
      <div>
        <form id="formulario" onSubmit={editStudent}>
          ID<input type='text' id='id' disabled value={student.id || ''} /> <br />
          {/* 用函数式更新确保获取最新的state，避免状态更新滞后 */}
          DNI<input type='text' id='dni' value={student.dni || ''} onChange={event => setStudent(prev => ({...prev, dni:event.target.value}))} /><br />
          Nombre<input type='text' id='nombre' value={student.nombre || ''} onChange={event => setStudent(prev => ({...prev, nombre:event.target.value}))} /><br />
          Dirección<input type='text' id='direccion' value={student.direccion || ''} onChange={event => setStudent(prev => ({...prev, direccion:event.target.value}))}/><br />
          Edad<input type='number' id='edad' value={student.edad || ''} onChange={event => setStudent(prev => ({...prev, edad:event.target.value}))}/><br />
          Email<input type='text' id='email' value={student.email || ''} onChange={event => setStudent(prev => ({...prev, email:event.target.value}))}/><br />
          
          {/* 用表单的onSubmit替代按钮onClick，更符合表单规范 */}
          <button id='editar' type="submit">Editar</button>
        </form>
      </div>
    </>
  )
}

export default EditStudent;

关键修改说明 #

1. 调整useEffect依赖：将依赖数组从[student]改为[params.studentId]，只有当路由参数里的studentId变化时，才重新调用API获取学生数据，不会因为输入框修改state而重复触发。
2. 修正初始状态：把useState([])改成useState({})，匹配单个学生对象的结构，同时在输入框value里添加|| ''，避免数据未加载时显示undefined。
3. 函数式更新state：用setStudent(prev => ({...prev, ...}))的方式更新state，确保每次都基于最新的state进行修改，避免状态更新滞后的问题。
4. 优化表单提交：给表单添加onSubmit事件，按钮设置type="submit"，同时在editStudent里调用e.preventDefault()，阻止默认的页面刷新行为，更符合React表单的最佳实践。

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