Create an axios post with multiple inputs using React Hooks

问题

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)
        }) 

    }, [])

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

回答1:

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.

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

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

来源：https://stackoverflow.com/questions/58277874/create-an-axios-post-with-multiple-inputs-using-react-hooks

标签

reactjs

axios

react-hooks