React表单只发送状态的一个属性，而不是整个状态

Question

我试图从我的反应客户端发送表单数据到我的nodejs服务器;然而，在提交表单时，只有状态的最后一个属性被发送到我的服务器。我知道这是一个客户端问题，因为邮差，我的整个表单数据被发送到我的数据库。

似乎当我向我的状态中的每个属性添加值时，只有该属性在user中维护。我没能在我分配给自己的时间内解决这个问题，所以我希望能从另一个角度/反馈这个问题。

const ModalForm = ({ show }) => {
if (!show) {
return null;
}
let [user, setUser] = useState({
firstName: '',
lastName: '',
email: '',
password: '',
age: ''
});
let handleChange = (e) => {
console.log('event name', e.target.name, 'event value', e.target.value);
setUser({
[e.target.name]: e.target.value
});
};
/*
currently, only the last prop and value are sending to my API
need to resolve so that all form data is sent to API
*/
let handleSubmit = (e) => {
e.preventDefault()
let data = user;
setUser({[e.target.name]: e.target.value});
axios.post('/new/user', data)
.then(res => console.log(res))
.catch(err => console.error(err))
}
console.log('user:', user);
return (
<div className='form-container'>
<form className='form-space' onSubmit={handleSubmit}>
<label>
First Name:<br/>
<input type='text' name='firstName' onChange={handleChange}/>
</label><br/>
<label>
Last Name:<br/>
<input type='text' name='lastName' onChange={handleChange}/>
</label><br/>
<label>
Email:<br/>
<input type='email' name='email' onChange={handleChange}/>
</label><br/>
<label>
Password:<br/>
<input type='password' name='password' onChange={handleChange}/>
</label><br/>
<label>
Age:<br/>
<input type='text' name='age' onChange={handleChange}/>
</label><br/>
<input type='submit' value='Submit' />
</form>
</div>
)
};
export default ModalForm;

Answer 1

useState功能部件状态设置与setState不同;在功能组件中，即使使用缺乏这些属性的对象调用setState，也保持状态对象的属性。就像Object.assign。

在类组件中，从状态{ foo: true }开始，执行setState({ bar: true })，结果是{ foo: true, bar: true }。

但功能成分中的useState不是这样的。新状态完全取代了旧状态，而不是将旧状态与新状态合并。从状态{ foo: true }开始，执行setState({ bar: true })，结果是{ bar: true }。

这里，既然你在做

setUser({
[e.target.name]: e.target.value
});

user之前的任何属性都将丢失。

将以前的user值扩展到新的状态中，这样就保留了以前的状态属性:

setUser({
...user,
[e.target.name]: e.target.value
});