¿Cómo borrar el estado de entrada de formulario vacío en React antes de enviarlo al servidor?
Por ejemplo, en el siguiente formulario, si no se completa user.name , el objeto enviado al servidor es:
{ age: "19" } Nota: por supuesto, puedo eliminar las propiedades vacías manualmente en submitHandler , pero ¿hay alguna otra forma que no requiera que las elimine manualmente?
const UserAdd = () => { const [user, setUser] = useState({ name: "", age: "" }); const inputChangeHandler = (e) => { setUser({ ...user, [e.target.name]: e.target.value }) } const submitHandler = (e) => { e.preventDefault(); // Start Solution const userWithoutEmptyProperties = {}; for(const key in user) { if(user[key]) { userWithoutEmptyProperties[key] = user[key]; } } // End Solution // send "userWithoutEmptyProperties" to server } return ( <form onSubmit={submitHandler} > <input type="text" name="name" onChange={inputChangeHandler} /> <input type="text" name="age" onChange={inputChangeHandler} /> <button type="submit">Add</button> </form> ) }Object.keys(user).forEach((item) => !user[item] && delete user[item);
Puedes usar una sola línea:
let o = Object.fromEntries(Object.entries(obj).filter(([_, v]) => v));
Más sobre esto: eliminar atributos en blanco de un objeto en Javascript