能否将多个useState抽象至独立文件？如何合并表单状态声明？

当然可以，直接将所有表单字段整合到一个对象中，用单个useState统一管理，远比零散的state声明简洁：

const [formState, setFormState] = useState({
  formFieldExample1: '',
  formFieldExample2: '',
  // 按需添加其他字段的默认值
});

更新单个字段时，记得用展开运算符保留原有状态，避免覆盖其他字段：

// 单独更新某一字段
setFormState(prev => ({
  ...prev,
  formFieldExample1: '新内容'
}));

// 通用的输入变更处理函数，适配所有表单字段
const handleInputChange = (e) => {
  const { name, value } = e.target;
  setFormState(prev => ({
    ...prev,
    [name]: value
  }));
};

这种方式不管表单有多少字段，都只需要维护一个state和通用处理函数，大幅简化代码。

完全可行，通过React自定义Hook封装表单状态管理逻辑，把状态逻辑从组件中抽离，让组件专注于渲染和事件绑定：

比如创建useFormState.js文件：

import { useState } from 'react';

export default function useFormState(initialValues) {
  const [formState, setFormState] = useState(initialValues);

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

  // 可额外添加重置表单、批量更新等扩展方法
  const resetForm = () => {
    setFormState(initialValues);
  };

  return {
    formState,
    handleChange,
    resetForm
  };
}

在表单组件中导入使用：

import useFormState from './useFormState';

function MyForm() {
  const { formState, handleChange, resetForm } = useFormState({
    formFieldExample1: '',
    formFieldExample2: ''
  });

  return (
    <form>
      <input
        name="formFieldExample1"
        value={formState.formFieldExample1}
        onChange={handleChange}
      />
      <input
        name="formFieldExample2"
        value={formState.formFieldExample2}
        onChange={handleChange}
      />
      <button type="button" onClick={resetForm}>重置表单</button>
    </form>
  );
}

这种抽离方式不仅让组件更清爽，还能在多个表单组件中复用该自定义Hook，提升代码复用性。

内容的提问来源于stack exchange，提问作者McDerp