Блог

Предположим, у меня есть компонент react, который по сути представляет собой форму с кнопкой отправки, которая отправляет запрос на обновление таблицы базы onSubmit данных . Запрос post требует, чтобы прошлые данные были в формате json, подобном этому:

 contactData = {"Name": "myName", "Email": "abc@gmail.com", "Phone": "999-999-9999"}
 

По сути, я хочу создать contactData хук, который обновляет «Имя», «Адрес электронной почты» и «Телефон» каждый onChange раз при запуске события. Это структура крючка, с которой мне нужна помощь.
Я уже пытался это сделать, но это не работает. postData Переменная пуста при axios вызове запроса. Как я могу заставить это работать? Есть ли способ получить все входные данные из формы за один раз (после ее заполнения)?:

 import React, { useState } from 'react'
import axios from "axios";

export default function AddContactForm() {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [phone, set] = useState("");

    //combined data object
    const postData = {
       name,
       email,
       phone
    }

    async function createUser(contactData) {
        await axios.post(config.apiURL   `/add_update_user/add_user`, { contactData })
          .then(res => {
            console.log(res);
            console.log(res.data);
        })
    }
 
    const myChangeHandler = (event) => {
        let nam = event.target.name;
        let val = event.target.value;
        if (nam === 'contact_name') {
          setName(val);
        } else if (nam === 'email') {
          setEmail(val);
        } else if (nam === 'phone') {
          setPhone(val);
        }
    }
   
    function mySubmitHandler(event) {
        event.preventDefault();
        console.log({ postData });
        createUser({ postData });
    }

    return(
        <div className="container all-center">
          <div className="card text-center" style={{ background: "#54c5f1" }}>
            <form onSubmit={mySubmitHandler}>
              <h3 style={{ textDecoration: "underline" }}>Complete the Contact Information and hit submit:</h3>
              <label>Contact Name</label>
              <input
                type='text'
                name='name'
                id='name'
                onChange={myChangeHandler}
                style={{ width: "100%" }}
              />
              <label>Email Address</label>
              <input
                 type='text'
                 name='email'
                 id='email'
                 onChange={myChangeHandler}
                 style={{ width: "100%" }}
              />
              <label>Phone Number</label>
              <input
                 type='text'
                 name='phone'
                 id='phone'
                 onChange={myChangeHandler}
                 style={{ width: "100%" }}
              />
              <button className="btn btn-primary"
               type='submit' id='addContactBtn'>Submit</button>
            </form>
          </div>
       </div>
    )
}