如何在提交表单之前编辑表单json数据

Question

发布React表单通常很简单。但是，在将有效负载发送到这个特定端点之前，我需要对其进行自定义。我需要它看起来像这样：

{
"httpMethod": "POST",
"body": {
"TableName": "Users",
"Item": {
"email": "[e-mail]",
"first_name": "Sasquatch",
"last_name": "Bigfoot"
}
}

这就是我现在所拥有的，但格式不正确：

const CreateUser = () => {
const [user, setUser] = useState({
'httpMethod': 'POST',
'body': {
'TableName' : 'Users',
'Item' : { 
email: '', first_name: '', last_name: ''
}
}
});
const handleChange = (event) => {
setUser({...user, [event.target.name]: event.target.value})
}
const url = 'https://aaaaaaa.execute-api.us-east-1.amazonaws.com/dev/';
const handleSubmit = (e) => {
e.preventDefault()
axios.post(url, user)
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
}) 
}
return (
<div className="container">
<form className='white' onSubmit={handleSubmit}>
<h5 className="grey-text.text-darken-3">Create User</h5>                        
<div className="input-field">
<label htmlFor="email">Email</label>
<input type="text" name="email" value={setUser.email} onChange={handleChange} required />
</div>
<div className="input-field">
<label htmlFor="first_name">First Name</label>
<input type="text" name="first_name" value={setUser.first_name} onChange={handleChange} required />
</div>
<div className="input-field">
<label htmlFor="last_name">Last Name</label>
<input type="text" name="last_name" value={setUser.last_name} onChange={handleChange} required />
</div>
<div className="input-field"> 
<button className="btn blue darken-3" type="submit">Sign Up</button>
</div>
</form>
</div>
);
}

当我在调试器中找到数据时，它看起来是这样的：

{
"httpMethod":"POST",
"body": {
"TableName":"Users",
"Item": {
“email":"",
"first_name":"",
"last_name":""
}
},
"email":"[e-mail]",
"first_name":"Sasquatch",
"last_name":"Bigfoot"}

也许这完全是错误的做法？我愿意让它发挥作用，或者走一条不同的、更有效的路线。

Answer 1

更改时，将事件名称和值设置为user.body.Item，而不是user

const handleChange = (event) => {
setUser({...user, user.body.Item[event.target.name]: event.target.value})
}

Answer 2

您可以尝试将有效载荷缝合在一起：

const handleSubmit = (e) => {
var payload = {
httpMethod: "POST",
body: {
TableName: "Users",
Item: {
email: user.email,
first_name: user.first_name,
last_name: user.last_name
}
}
e.preventDefault()
axios.post(url, payload)
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
}) 
}