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

IT技术 reactjs axios react-hooks
2021-04-29 11:32:02

我正在学习如何使用 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
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: '' }); }

还要记住为与状态中的字段相对应的每个输入赋予名称属性。（看起来你已经有了）

    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
其它你可能感兴趣的问题
上一篇Microsoft 从 oauth2 问题登录 下一篇React路由器动态路由不渲染组件