如何在React中发送之前删除空状态输入值

Question

在发送到服务器之前如何清除React中的空表单输入状态?

例如，在下面的表单中，如果没有填写user.name，则发送给服务器的对象为:

{ age: "19" }

注意:我当然可以在submitHandler中手动删除空属性，但是有没有其他不需要我手动删除的方法?

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>
)
}

Answer 1

Object.keys(user).forEach((item) => !user[item] && delete user[item);

Answer 2

您可以使用一行代码:

let o = Object.fromEntries(Object.entries(obj).filter(([_, v]) => v));

详细说明:从Javascript对象中删除空白属性