React js update form value using useState

Question

J'ai un composant fonctionnel React, un formulaire acceptant des informations pour des événements. J'ai besoin d'envoyer les informations du formulaire rempli en utilisant une requête POST. Mon état formData ne se met pas à jour, j'ai essayé différentes fonctions onChange pour essayer de le faire fonctionner. Une idée de l'endroit où je me trompe ?

`

import styled from 'styled-components';

import axios from 'axios';

import Input from './Input';

import react, {useState, useEffect} from "react";

import DateTimePicker from 'react-datetime-picker';

import TimePicker from "react-time-picker";

import DatePicker from "react-date-picker";

const url = 'http://localhost:5000/events/create'

const EventForm = (props)=> {
const [dateValue, onChangeDate] = useState(new Date());

const [timeValue, onChangeTime] = useState();

const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    contactEmail: '',
    eventTitle: '',
    eventDescription: '', 
})

function onChange (e) {
    let name = e.target.name ;
    let value = e.target.value;
    let formObj = { ...formData };
    setFormData({ ...formData, [name]: value });
    console.log(formData)
}
const body = {
    firstName: formData.firstName,
    lastName: formData.lastName,
    contactEmail: formData.contactEmail,
    eventTitle: formData.eventTitle,
    eventDescription: formData.eventDescription,
    eventDate: dateValue,
    eventTime: timeValue,
}
const postFormData = async (e) => {
    console.log(formData)
    e.preventDefault()
    await axios({
        method: 'post',
        url: url,
        data: body,
     })
    .then((response) => {
        console.log(response)
    })
    .catch(error => console.log(`Error: ${error}`));
}

// const postFormData = async (e) => {
//     e.preventDefault()
//     let newEvent = await fetch("http://localhost:5000/events/create",
//         {
//             method: "POST",
//             headers: {
//                 'Content-Type': 'application/json',
//                 'Accept': 'application/json'
//             },
//             body: JSON.stringify(body)
//         });
//         newEvent = await newEvent.json();
//         console.log(newEvent);
// }
    useEffect(() => {
        return () => {
        console.log(formData.firstName)
        }
    })

  return (
    <form onSubmit={props.onSubmit}>
    <>
    {/* <DateTimePicker onChange={onChange} value={value} minDate={new Date()}/> */}
    <StyledForm onSubmit={postFormData}>
        <label>
            First Name
        </label>
        <Input 
            name={"firstName"} 
            placeholder={"First Name"} 
            type={"text"}
            value={formData.firstName}
            onChange={(e) => setFormData({ ...formData, firstName: e.target.value})}
        />
        <label>
            Last Name
        </label>
        <Input 
            name={"lastName"} 
            placeholder={"Last Name"} 
            type={"text"}
            onChange={onChange}
        />
        <label>
            Contact Email
        </label>
        <Input 
            name={"contactEmail"} 
            placeholder={"Email"} 
            type={"email"} 
            onChange={onChange}
        />
        <label>
            Event Date
        </label>
        <DatePicker onChange={onChangeDate} value={dateValue}/>
        <label>
            Event Time
        </label>
        <TimePicker onChange={onChangeTime} value={timeValue} />
        <label>
            Event Description
        </label>
        <Input 
            name={"eventTitle"} 
            placeholder={"Event Title"} 
            type={"text"}
            onChange={onChange}
        />
        <label>
            Event Description
        </label>
        <Input 
            name={"eventDescription"} 
            placeholder={"Event Description"} 
            type={"text"}
            width={"300px"}
            height={"300px"}
            onChange={onChange}
        />

        <Input 
            name={"submit"} 
            type={"submit"} 
            value={"Create"} 
        />       
    </form>
    </>
  );

}

export default EventForm;`

Answer 1

Les formData ne sera pas mise à jour immédiatement, votre console.log imprimera toujours la valeur originale avant la mise à jour. De même, lorsque l'état suivant est calculé à partir de l'état précédent, comme dans votre exemple, vous devez utiliser l'option mise à jour fonctionnelle version de setState :

const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    contactEmail: '',
    eventTitle: '',
    eventDescription: '', 
})

function onChange (e) {
    let name = e.target.name;
    let value = e.target.value;
    setFormData((currentFormData) => {
      const nextFormData = {
        ...currentFormData,
        [name]: value,
      })
      console.log(nextFormData)
      return nextFormData;
    );
}