Создайте сообщение с несколькими входами, используя React Hooks - PullRequest
Новая
       22

Создайте сообщение с несколькими входами, используя React Hooks

1 голос
/ 08 октября 2019

Я учусь использовать React, начал использовать классы и решил переключиться на использование Hooks. Я считаю, что у меня все правильно сопоставлено, однако я очень не уверен, как структурировать свой axios.post с помощью useEffect для обработки нескольких пользовательских вводов. 

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 Ответ

1 голос
/ 08 октября 2019

Ваш запрос 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)
          }) 
    }

Также не забудьте присвоить атрибут имени каждому входу, который соответствует полю в состоянии. (Который, похоже, уже есть) 

    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
...