如何解决React 表单只发送状态的一个属性,而不是整个状态
我正在尝试将表单数据从我的 React 客户端发送到我的 nodejs 服务器;但是,在提交表单时,只有状态的最后一个属性被发送到我的服务器。我知道这是一个客户端问题,因为使用 Postman,我的整个表单数据都会发送到我的数据库。
似乎当我为状态中的每个属性添加一个值时,只有该属性会在 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;
解决方法
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
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。