React-Hook-Form中setValue()无法更新token属性问题排查

问题原因 #

1. 提交数据是快照：handleSubmit传给onSubmit的data是表单提交瞬间的字段值快照，此时调用setValue修改token，不会影响已经生成的data变量。
2. setValue是异步操作：setValue不会立刻同步更新表单状态，所以即使在setValue后立刻尝试获取最新值，也可能拿到旧数据。

解决方案 #

方案一：直接修改提交数据（推荐，适合仅提交时带token的场景） #

如果需求只是在提交时给token赋值并一起提交，没必要用setValue更新表单状态，直接在onSubmit里扩展原数据即可：

type FormInputs = {
  firstName: string;
  lastName: string;
  token: string;
};

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormInputs>();

  const onSubmit = (data: FormInputs) => {
    // 直接给提交数据添加token字段
    const submitData = { ...data, token: "abc123xy" };
    alert(JSON.stringify(submitData));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <input type="text" {...register("firstName")} />
      <label>Last Name</label>
      <input type="text" {...register("lastName")} />
      <button type="submit">Submit</button>
    </form>
  );
};

方案二：更新表单状态后获取最新值（适合需要保留token状态的场景） #

如果确实需要更新表单内的token状态，可通过await等待setValue完成，再用getValues获取最新的表单数据：

type FormInputs = {
  firstName: string;
  lastName: string;
  token: string;
};

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setValue,
    getValues
  } = useForm<FormInputs>();

  const onSubmit = async () => {
    // 等待setValue完成状态更新
    await setValue("token", "abc123xy", { shouldDirty: true });
    // 获取最新的全量表单数据
    const updatedData = getValues();
    alert(JSON.stringify(updatedData));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <input type="text" {...register("firstName")} />
      <label>Last Name</label>
      <input type="text" {...register("lastName")} />
      <input type="hidden" {...register("token")} />
      <button type="submit">Submit</button>
    </form>
  );
};

补充说明 #

• 不需要在页面中维护token状态（比如不需要回显或后续使用）时，方案一更轻量，避免不必要的表单状态更新。
• setValue的第三个参数{ shouldDirty: true }会标记该字段为已修改，确保状态更新能被正确触发。

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