состояние внутри хуков не обновляется впервые при отправке формы в ответ

Question

Я пытался внедрить форму contactUS в реакцию, используя hooks. Форма Contact us находится внутри hooks. Когда я впервые отправляю форму, состояние в hooks не обновляется, когда я нажимаю 2-й раз, когда устанавливаются состояния. И я возвращаюсь компонент состояния к классу, где сделан вызов API.

// contactushook.js

import React, { useState } from 'react';

const ContactUshook = ({ parentCallBack }) => {
    const [data, setData] = useState([]);
    const handleSubmit = (event) => {
        event.preventDefault();
        setData({ name: document.getElementById('name').value, email: document.getElementById('email').value, message: document.getElementById('message').value });

        console.log(data);
        parentCallBack(data);
    }

    return <React.Fragment>
        <div className="form-holder">
            <form onSubmit={handleSubmit}>
                <div>
                    <input id="name" type="text" placeholder="enter the name"></input>
                </div>
                <div>
                    <input id="email" type="email" placeholder="enter the email"></input>
                </div>
                <div>
                    <textarea id="message" placeholder="Type message here"></textarea>
                </div>
                <button type="submit" >Submit</button>
            </form>
        </div>

    </React.Fragment >

}

export default ContactUshook;

// contactus.js

import React, { Component } from 'react';
import ContactUshook from './hooks/contactushook';
import '../contactUs/contactus.css';
class ContactComponent extends Component {

    onSubmit = (data) => {
        console.log('in onsubmit');
        console.log(data);
    }
    render() {
        return (
            <div>
                <h4>hook</h4>
                <ContactUshook parentCallBack={this.onSubmit}></ContactUshook>
            </div>
        );
    }
}

export default ContactComponent;

Answer 1

Прекратите использовать запросы документов и начните использовать вместо этого состояние!

Ваш компонент ContactUshook должен выглядеть следующим образом:

const ContactUshook = ({ parentCallBack }) => {
    const [data, setData] = useState({ name: '', email: '', message: '' });

    const handleSubmit = () => {
        event.preventDefault();
        parentCallBack(data);
    }

    const handleChange = (event, field) => {
        const newData = { ...data };
        newData[field] = event.target.value;
        setData(newData);
    }

    return (
        <div className="form-holder">
            <form onSubmit={handleSubmit}>
                <div>
                    <input 
                        id="name" 
                        type="text" 
                        value={data.name}
                        placeholder="enter the name" 
                        onChange={(e) => handleChange(e,'name')} />
                </div>
                <div>
                    <input 
                        id="email" 
                        type="email" 
                        value={data.email} 
                        placeholder="enter the email" 
                        onChange={(e) => handleChange(e,'email')} />
                </div>
                <div>
                    <textarea 
                        id="message" 
                        value={data.message} 
                        placeholder="Type message here" 
                        onChange={(e) => handleChange(e,'message')} />
                </div>
                <button type="submit" >Submit</button>
            </form>
        </div>
    );
}