使用 React Hooks 创建一个具有多个输入的 axios 帖子

Question

我正在学习如何使用 React，开始使用类，并决定改用 Hooks。我相信我已经正确映射了所有内容，但是我非常不确定如何使用useEffect构建我的 axios.post 来处理多个用户输入。

import React, { useState, useEffect } from 'react'
import axios from 'axios'
const Signup = () => {
const [customerSignUp, setCustomerSignUp] = useState([
{ email: '', password: '', firstName: '', lastName: ''}
]);
const handleChange = (event) => {
setCustomerSignUp(event.target.value)
}
const handleSubmit = (e) => {
e.preventDefault()
console.log(e)
}
useEffect(() => {
axios.post('/api/Customer/SignUp', {
})
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
}) 
}, [])

我只包含 lastName 来显示我如何使用 handleChange 事件处理程序来更改客户的状态。

return (
<div className="container">
<form className='white' onSubmit={handleSubmit}>
<h5 className="grey-text.text-darken-3">Sign Up With Email</h5>                        
<div className="input-field">
<label htmlFor="lastName">Last Name</label>
<input type="text" name="lastName" value={customerSignUp.lastName} onChange={handleChange} required />
</div>
<div className="input-field"> 
<button className="btn blue darken-3" type="submit">Sign Up</button>
</div>
</form>
</div>
);
}
export default Signup

Answer 1

您的axios请求不必在useEffect()内，实际上，使用您的注册功能，最好将其保留在您的handleSubmit函数中。 您可以选择将useEffect()设置为在首次组件渲染后或每次更改特定依赖项后触发一次。两者都不是特别适合您的功能。

此外，让您的状态保存一个对象而不是一个对象数组似乎更有意义。从那里，您可以将状态放入axios请求中，如下所示：

import React, { useState, useEffect } from 'react'
import axios from 'axios'
const Signup = () => {
const [customerSignUp, setCustomerSignUp] = useState(
{ email: '', password: '', firstName: '', lastName: ''}
);
const handleChange = (event) => {
setCustomerSignUp({...customerSignUp, [event.target.name]: event.target.value})
}
const handleSubmit = (e) => {
e.preventDefault()
axios.post('/api/Customer/SignUp', customerSignUp)
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
}) 

setCustomerSignUp({ email： ''， password： ''， firstName： ''， lastName： '' }(; }

还要记住为每个输入指定一个与状态中的字段对应的 name 属性。(看起来你已经有了(

return (
<div className="container">
<form className='white' onSubmit={handleSubmit}>
<h5 className="grey-text.text-darken-3">Sign Up With Email</h5>                        
<div className="input-field">
<label htmlFor="lastName">Last Name</label>
<input type="text" name="lastName" value={customerSignUp.lastName} onChange={handleChange} required />
</div>
<div className="input-field"> 
<button className="btn blue darken-3" type="submit">Sign Up</button>
</div>
</form>
</div>
);
}
export default Signup