Tengo un formulario en reacción que está lleno de datos de una API. Quiero editar estos datos en el formulario, pero no puedo hacerlo, porque la api siempre sobrescribe los campos.
Este es mi código:
let params = useParams(); const [student, setStudent] = useState([]); useEffect(() => { API.getStudentDetails(params.studentId).then(setStudent); },[student]); function editStudent(){ API.editStudent(student).then(result => { if (result){ alert("Estudiante modificado"); } }) } return( <> <div>Editar alumno {student.dni}</div> <div> <form id="formulario"> ID<input type='text' id='id' disabled value={student.id} /> <br /> DNI<input type='text' id='dni' value={student.dni} onChange={event => setStudent({...student, dni:event.target.value})} /><br /> Nombre<input type='text' id='nombre' value={student.nombre} onChange={event => setStudent({...student, nombre:event.target.value})} /><br /> Dirección<input type='text' id='direccion' value={student.direccion} onChange={event => setStudent({...student, direccion:event.target.value})}/><br /> Edad<input type='number' id='edad' value={student.edad} onChange={event => setStudent({...student, edad:event.target.value})}/><br /> Email<input type='text' id='email' value={student.email} onChange={event => setStudent({...student, email:event.target.value})}/><br /> <button id='editar' onClick={() => editStudent()}>Editar</button> </form> </div> </> )¿Cómo puedo hacer esto? Gracias por adelantado
El problema está en tu gancho useEffect . Se llamará a useEffect cada vez que se cambie el estado del student . Llama a setStudent en cada cambio de campo de formulario que activará el useEffect que al final obtendrá los datos iniciales del student de la API.
Lo que puede hacer es eliminar al student de la matriz de dependencias useEffect .
useEffect(() => { API.getStudentDetails(params.studentId).then(setStudent); },[]); Con esto, useEffect solo se llamará cuando se monte el componente, o puede colocar params.studentId en la matriz si es necesario.
useEffect(() => { API.getStudentDetails(params.studentId).then(setStudent); },[params.studentId]);