Necesito cambiar el estado de campos específicos en el objeto de problems :
const [problems, setProblems] = useState({ first_name: false, last_name: false, city: false, email: false, password: false, }); Intenté algo como esto a continuación, pero me actualiza solo el último valor de la lista de errores Object.keys(error.response.data) :
.catch((error) => { Object.keys(error.response.data).map((err) => { setProblems({ ...problems, [err]: true }); }); }); error es un objeto que tiene claves que tienen los mismos nombres que las claves en el objeto de problems . ¿Cómo puedo hacer esto correctamente para que todos los campos se actualicen?
Solo actualiza el estado con el último valor de estado debido al cierre sobre el estado.
El estado es constante dentro de una representación particular de un componente; para ver el estado actualizado, el componente debe volver a renderizarse.
Dado que está llamando a setProblems() varias veces dentro del mismo renderizado:
setProblems({ ...problems, [err]: true }); Los problems en la declaración anterior se refieren al mismo estado que estaba vigente cuando se llamó a Object.keys(...).map(...) . En resumen, está propagando el mismo estado cada vez que se llama setProblems .
Lo que tienes que hacer es:
Primero cree el objeto que desea guardar en el estado
const newState = { ...problems }; Object.keys(error.response.data) .forEach((err) => newState[err] = true);Llame a la función de establecimiento de estado
setProblems(newState);Prueba esto:
.catch((error) => { const newProblems = {...problems}; Object.keys(error.response.data).forEach((err) => { newProblems[err] = true; }); setProblems(newProblems); }); En realidad, no he probado su código original, pero lo que supongo es que, dado que el setter de setState no es síncrono, cuando lo llama en un bucle, solo está aplicando la última llamada.