使用React-hook-form与useActionState提交表单报错求助

问题根源 #

你同时混用了React Hook Form的handleSubmit、原生表单的action（绑定Server Action）以及手动调用submit()/requestSubmit()，导致表单提交流程冲突：

• 手动调用submit()会绕过React的表单处理逻辑，触发React的错误提示
• 改用requestSubmit()后，又因React Hook Form的handleSubmit默认阻止了默认提交行为，导致表单无法触发Server Action

修复方案 #

移除多余的formRef和手动提交逻辑，让React Hook Form负责验证，验证通过后再触发原生表单提交到Server Action：

修改后的组件代码 #

export const Step3 = () => {
  const step3 = useOrderStore((state) => state.step3);
  const [state, formAction, isPending] = React.useActionState(createItem, {
    message: "",
    image: "",
    success: false,
  });

  console.log({ state, isPending });

  const configForm = useForm<IItemConfig>({
    resolver: zodResolver(ConfigSchema),
    defaultValues: step3,
  });

  return (
    <Card>
      <CardContent className="flex gap-8 lg:flex-row flex-col">
        <Form {...configForm}>
          <form
            className="order-3 lg:order-1"
            action={formAction}
            onSubmit={configForm.handleSubmit((_data, e) => {
              // 验证通过后，触发原生表单提交到Server Action
              e.currentTarget.requestSubmit();
            })}
          >
            <div className="space-y-4 w-full">
              <FormField
                control={configForm.control}
                name="shape"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Bentuk Dasar</FormLabel>
                    <Select
                      {...field}
                      defaultValue={field.value}
                      onValueChange={field.onChange}
                    >
                      <SelectTrigger data-testid="font-family-select">
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {SHAPE_OPTIONS.map((shape) => (
                          <SelectItem key={shape.value} value={shape.value}>
                            {shape.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <Button type="submit" className="w-full">
                Generate
              </Button>
            </div>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
};

关键说明 #

1. 移除formRef：不需要手动获取表单元素，直接通过事件对象e.currentTarget访问表单
2. 调整onSubmit逻辑：利用React Hook Form的handleSubmit完成表单验证，验证通过后调用requestSubmit()触发原生表单提交，既保留了验证逻辑，又能正确触发Server Action
3. 保留原生action={formAction}：确保表单提交后走useActionState绑定的Server Action流程

额外检查 #

• 确认ConfigSchema能正确解析FormData中的字段（当前代码里的Object.fromEntries(data.entries())写法是正确的）
• 验证useActionState的初始状态与Server Action返回的FormState结构完全一致

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