使用React Hooks创建具有多个输入的axios帖子 [英] Create an axios post with multiple inputs using React Hooks

问题描述

我正在学习如何使用React，并开始使用类，并决定转换为使用Hooks.我相信我已经正确地配置了所有内容，但是我不确定如何使用useEffect构造axios.post来处理多个用户输入.

I am learning how to use React and started using classes and decided to swap over to using Hooks. I believe that I have everything mapped out correctly, however I am very uncertain of how to structure my axios.post with useEffect to handle multiple user inputs.

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事件处理程序来更改客户的状态.

I included just the lastName to show how I am using the handleChange event handler to change the state of the customer.

    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

推荐答案

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

Your axios request doesn't have to be inside a useEffect(), in fact with your sign-up feature, it probably is best to keep it in your handleSubmit function instead. You have the option to set useEffect() to trigger a single time after first component-render or after every change to a particular dependency. Neither is particular suitable for your feature.

此外，让状态保存一个对象而不是对象数组似乎更有意义.从那里，您可以像下面这样将状态放入 axios 请求中:

Additionally, it seems like it would make more sense to have your state hold an object, not an array of objects. From there, you can just drop your state into the axios request like this:

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:''}));}

setCustomerSignUp({ email: '', password: '', firstName: '', lastName: '' }); }

还请记住为与状态中的字段相对应的每个输入赋予名称属性.(看起来您已经拥有了)

Also remember to give a name attribute to each input that corresponds to a field in the state. (Which looks like you already have)

    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

这篇关于使用React Hooks创建具有多个输入的axios帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！