为何我的React组件表单状态总是重置或重复创建forms类实例？

核心问题1：每次组件渲染都会执行new forms(...)，但useState仅在首次渲染使用该值 #

你把new forms(...)直接作为useState的初始值参数，这个表达式会在组件每次重新渲染时都执行一遍。虽然React的useState只会在首次渲染时将这个实例作为初始状态保存，后续渲染会忽略这个表达式，但这会造成不必要的实例创建，也容易让你误以为每次渲染都生成了新的表单实例。

核心问题2：直接存储类实例到useState，状态更新逻辑易出错 #

React的状态更新依赖于引用变化，如果你的forms类内部维护了自己的状态（比如表单字段值），而你是直接修改实例的属性（比如form.userName = 'xxx'）而不是通过setFormInstance传入新的实例，React就无法检测到状态变化，不会触发组件重新渲染。当组件因为其他状态（比如loggedIn）变化而重渲染时，你看到的表单状态可能回到初始值，或者因为误解实例创建逻辑导致混乱。

修复方案 #

方案1：用useMemo缓存表单实例 #

避免每次渲染都创建新的forms实例，确保实例仅在必要时更新：

const LoginComponent: FC<loginComponentProps> = () => {
  const [loggedIn, setloggedIn] = useState(false);
  // 用useMemo缓存表单实例，空依赖数组确保仅首次渲染创建
  const form = useMemo(() => new forms(
    { userName: '', password: '' } as LoginDto,
    [
      { Key: 'userName', validationFunc: Validations.isRequird },
      { Key: 'password', validationFunc: Validations.isRequird },
    ]
  ), []);

  // 更新表单时需生成新实例（假设forms类有克隆/更新方法）
  const updateForm = (newData: Partial<LoginDto>) => {
    const newForm = form.cloneWith(newData);
    // 若需存入状态则调用setFormInstance
    // setFormInstance(newForm);
  };

  return (
    <ImageBackground>
      {/* 表单渲染逻辑 */}
    </ImageBackground>
  );
};

方案2：存储表单原始数据，而非类实例 #

更符合React状态管理最佳实践，将表单字段数据存在useState中，forms类仅作为工具类使用：

const LoginComponent: FC<loginComponentProps> = () => {
  const [loggedIn, setloggedIn] = useState(false);
  const [formData, setFormData] = useState<LoginDto>({ userName: '', password: '' });

  // 验证时创建forms实例
  const validateForm = () => {
    const form = new forms(formData, [
      { Key: 'userName', validationFunc: Validations.isRequird },
      { Key: 'password', validationFunc: Validations.isRequird },
    ]);
    return form.validate();
  };

  // 更新表单字段
  const handleInputChange = (field: keyof LoginDto, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  return (
    <ImageBackground>
      <input
        value={formData.userName}
        onChange={(e) => handleInputChange('userName', e.target.value)}
      />
      <input
        type="password"
        value={formData.password}
        onChange={(e) => handleInputChange('password', e.target.value)}
      />
      <button onClick={validateForm}>登录</button>
    </ImageBackground>
  );
};

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