Как объединить несколько полей формы в один объект состояния вместо отдельных useState?

Объединение полей формы в один объект состояния

В React для управления формой часто используют несколько хуков useState для каждого поля. Однако это приводит к дублированию кода и усложняет поддержку. Более эффективный подход — хранить все поля в одном объекте состояния. Это позволяет централизованно управлять формой, упрощает сброс, валидацию и отправку данных.

Как это работает

Вместо создания отдельных состояний для каждого поля, вы создаете один объект, где ключи — это имена полей, а значения — их текущие значения. Для обновления используется функция setState, которая принимает новый объект или функцию, возвращающую новый объект на основе предыдущего состояния. Важно использовать spread-оператор (...prevState) или Object.assign, чтобы не потерять другие поля.

Пример кода

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" value={formData.username} onChange={handleChange} />
      <input name="email" value={formData.email} onChange={handleChange} />
      <input name="password" type="password" value={formData.password} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

Преимущества и применение

• Упрощает код: меньше хуков, легче читать и поддерживать.
• Удобно для сброса формы: достаточно вызвать setFormData с начальным объектом.
• Легко передавать данные в API или для валидации.
• Подходит для форм любого размера, особенно с большим количеством полей.

Вывод: Используйте один объект состояния для формы, когда нужно централизованное управление, упрощение кода и удобство работы с данными. Этот подход особенно полезен в сложных формах с множеством полей.