提交后我在控制台中看不到任何表单值

Question

为什么我无法在控制台中看到值？一切都正确到位，但在控制台中看不到表单值。我认为这与 onSubmit 函数有关。任何帮助将不胜感激。

使用 Zod 的表单架构：

/* creating a schema */
const formSchema = z.object({
  firstName: z.string().min(1, {
    message: 'First Name is required'
  }),
  lastName: z.string().min(1, {
    message: 'Last Name is required'
  }),
  email: z.string().email({
    message: 'Invalid email address'
  }),
  numberOfKids: z.number().min(1, {
    message: 'Number of kids must be at least 1'
  }).int({
    message: 'Number of kids must be an integer'
  })
});

onSubmit 函数：

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    console.log(values);
  };

return 语句（调用 onSubmit 函数的地方）：

return (
    <>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          {/* FIRST NAME */}
          <FormField
            control={form.control}
            name="firstName"
            render={({ field }) => (
              <FormItem>
                <FormLabel>
                  First Name
                </FormLabel>
                <FormControl>
                  <Input {...field} placeholder="" />
                </FormControl>
              </FormItem>
            )}
          />
...

Answer 1

如果 onSubmit 函数被标记为异步，则就像等待某些事情完成然后再继续。检查您的代码是否等待表单完全提交，然后再执行其他操作。