import { useState } from "react"; function useForm(initialfields) { const [value, setValue] = useState(initialfields); const reset = () => Object.keys(value).forEach((param) => setValue({ ...value, [param]: "" })); //setValue(Object.keys(value).forEach((val) => (value[val] = ""))); return [value, handleChange, reset]; } export default useForm;Estoy tratando de restablecer el valor de todos los campos en el objeto usando setState. Sin embargo, el siguiente código solo restablece el valor en el último campo. Digamos Valor = {nombre de usuario:"Sam123",nombre:"Sam"}, entonces mi código actual devuelve {nombre de usuario:"Sam123",nombre:""} en lugar de {nombre de usuario:"",nombre:""} [ 1]: https://i.stack.imgur.com/urdmM.png
Está actualizando un valor de estado utilizando su valor anterior. Debe usar el argumento de devolución de llamada del establecedor de estado. https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
Además, en lugar de llamar al setter de estado ( setValue ) para cada clave, itere dentro de la devolución de llamada del setter de estado. Esto hace que el setter del estado sea llamado solo una vez.
function reset() { setValue((value)=>{ // use previous value of value return Object.keys(value).reduce((acc,key)=>{ acc[key] = ''; // set each key to empty string return acc; }, {}); }); }Creo que podrías estar complicándolo un poco.
En lugar de usar la función setValue y expandir la matriz para alimentarla, el método forEach ya está haciendo la iteración sobre cada par clave/valor. Es como si estuvieras tratando de hacer el doble de trabajo.
En lugar de esto: Object.keys(value).forEach((param) => setValue({ ...value, [param]: "" }));
Vea abajo:
let obj = {"username":"Sam123","name":"Sam"}; console.log( obj ); Object.keys(obj).forEach(key => obj[key] = "" ); console.log( obj );