Получить конкретное c значение состояния при использовании пользовательских хуков (при попытке реализовать обработку формы с хуками)

Question

Я реализую форму, используя React-хуки вместо классов и состояний. Это моя форма:

const { values, handleChange, handleSubmit } = useForm();
  const [gender, setGender] = useState("");

   return (
      <>
     <ul className="collapsible">
        <li>
          <div className="collapsible-header">Step 1: Your details</div>
          <div className="collapsible-body">

                  <div>
                     <label>First name</label>
                  <input className="browser-default" type="text" name="name" value={values.name} onChange={handleChange}/>
                  </div>
                  <div><label>Last name</label>
                  <input className="browser-default" type="text" name="lastName" value={values.lastName} onChange={handleChange}/> </div>

                   <div><label>Email</label>
                  <input className="browser-default" type="text" name="email" value={values.email} onChange={handleChange}/>
                </div>

                 <button type="submit" className="browser-default">Next></button>

          </div>

Это мой пользовательский компонент ловушки useForm:

import { useState } from 'react';

const useForm = (callback) => {

  const [values, setValues] = useState({});

  const handleSubmit = (event) => {
    if (event) event.preventDefault();
      callback();


  };

  const handleChange = (event) => {
    event.persist();
    setValues(values => ({ ...values, [event.target.name]: event.target.value }));
  };

  return {
    handleChange,
    handleSubmit,
    values,
  }
};

export default useForm;

Теперь я хотел бы создать объект с данными отправленной формы для публикации с помощью Ax ios на сервере. Объект должен выглядеть следующим образом:

let data ={
        firstName: name,
        lastName: lastName,
        email:email,
        number:number,
        gender:gender,
        dob: `${day}-${month}-${year}`,
        comments: comments
      }

, учитывая, что с помощью пользовательского хука я создал в основном только одно «значение» состояния, как я могу назначить соответствующее значение каждому свойству? Например, "firstName: [event.target.name]" будет работать? Спасибо, ребята!

Answer 1

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

1. firstName: у вас нет поля формы с таким именем. потому что вы зависите от сопоставления имен полей формы и JSON объекта, поэтому вы должны убедиться, что каждое имя поля формы точно соответствует вашему ключу объекта JSON.

2. Вы получите A component is changing an uncontrolled input of type text to be controlled. ошибку, потому что значение поля формы будет иметь undefined в качестве начального значения. два возможных исправления, самое простое - в каждом поле формы атрибут значения должен выглядеть так: value={values.name || ''}.

Answer 2

Разве вы не можете просто сделать это?

let data ={
  firstName: values.name,
  lastName: values.lastName,
  email: values.email,
  ... etc
}

Значения - это объект, поэтому для использования его отдельных значений вам достаточно получить доступ к соответствующим ключам. values.your_key.