React-hook-form在Redux状态变更后错误提示消失问题求助

问题背景 #

• 基于Redux管理表单状态，需实现多标签页表单同步+提交前字段变更自动保存
• 核心问题：通过Redux hook更新表单值后，React-hook-form的错误提示会直接消失
• 尝试过用useEffect调用trigger触发验证，但存在无限循环风险，且测试示例中无法正常运行
• 已排查方向：试过官方文档的Controller、defaultValues、resetOptions等方案，也在React-hook-form Discord频道求助，问题根源疑似Redux useSelector更新值时，React-hook-form的验证触发机制未正常工作

可行解决方案 #

1. 用Controller正确绑定Redux状态 #

将Controller的value直接关联Redux状态，同时在onChange中同步更新Redux store与表单状态，确保验证逻辑正常触发：

import { Controller, useForm } from "react-hook-form";
import { useSelector, useDispatch } from "react-redux";
import { updateFormField } from "./store/actions";

const Form = () => {
  const { control, formState: { errors } } = useForm({
    defaultValues: useSelector(state => state.form)
  });
  const formData = useSelector(state => state.form);
  const dispatch = useDispatch();

  return (
    <>
      <Controller
        name="username"
        control={control}
        rules={{ required: "用户名不能为空", minLength: { value: 3, message: "用户名至少3位" } }}
        render={({ field }) => (
          <input
            {...field}
            value={formData.username}
            onChange={(e) => {
              const value = e.target.value;
              field.onChange(value);
              dispatch(updateFormField("username", value));
            }}
          />
        )}
      />
      {errors.username && <span className="error">{errors.username.message}</span>}
    </>
  );
};

2. 严格控制useEffect触发验证的依赖 #

若必须手动触发验证，需添加精准的依赖判断，避免无限循环：

import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { useSelector } from "react-redux";
import isEqual from "lodash.isEqual";

const Form = () => {
  const { trigger, watch } = useForm();
  const reduxFormData = useSelector(state => state.form);
  const currentFormData = watch();

  useEffect(() => {
    // 仅当Redux状态与表单当前状态不一致时触发验证
    if (!isEqual(reduxFormData, currentFormData)) {
      trigger();
    }
  }, [reduxFormData, currentFormData, trigger]);

  // 表单渲染逻辑...
};

注意：复杂表单状态建议用lodash.isEqual做深度比较，避免JSON.stringify的性能问题与边界情况

3. 配置表单重置选项保留验证状态 #

通过resetOptions配置，在Redux状态更新重置表单时保留错误提示：

import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { useSelector } from "react-redux";

const Form = () => {
  const { reset, formState: { errors } } = useForm({
    shouldUnregister: false,
    resetOptions: {
      keepErrors: true, // 重置时保留错误提示
      keepDirty: true
    }
  });
  const reduxFormData = useSelector(state => state.form);

  useEffect(() => {
    reset(reduxFormData);
  }, [reduxFormData, reset]);

  // 表单渲染逻辑...
};

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