使用React Hook窗体使用监视所有字段重新呈现useEffect的问题

import React, { useState, useEffect } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({});
  
  // 其他表单字段的状态变量
  // const [field1, setField1] = useState('');
  // const [field2, setField2] = useState('');
  // ...
  
  // 表单字段变化时更新状态
  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };
  
  // 其他表单字段变化时更新状态的处理函数
  // const handleField1Change = (event) => {
  //   setField1(event.target.value);
  // };
  // const handleField2Change = (event) => {
  //   setField2(event.target.value);
  // };
  // ...
  
  // useEffect监视所有字段的变化并重新呈现组件
  useEffect(() => {
    // 执行副作用操作，例如重新呈现组件、发送网络请求等
    console.log('Form data changed:', formData);
  }, [formData]); // 传入依赖数组，只有当formData发生变化时才会执行useEffect中的代码
  
  return (
    <form>
      {/* 表单字段的输入框 */}
      <input type="text" name="field1" value={formData.field1 || ''} onChange={handleInputChange} />
      <input type="text" name="field2" value={formData.field2 || ''} onChange={handleInputChange} />
      {/* 其他表单字段的输入框 */}
      {/* <input type="text" value={field1} onChange={handleField1Change} /> */}
      {/* <input type="text" value={field2} onChange={handleField2Change} /> */}
    </form>
  );
}