我的react-hook-form在Typescript中的handleSubmit函数不断重新加载页面并且不返回结果

Question

我从react-hook-form文档中复制了确切的代码，如下所示

import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";

type FormValues = {
  firstName: string;
  lastName: string;
  email: string;
};

export default function TestForm() {
  const { register, handleSubmit } = useForm<FormValues>();
  const onSubmit: SubmitHandler<FormValues> = (data) => console.log(data);

  return (
    <form onSubmit={void handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <input {...register("lastName")} />
      <input type="email" {...register("email")} />

      <input type="submit" />
    </form>
  );
}

除了handleSubmit函数之前的void关键字之外，我没有更改任何内容，因此打字稿上不再有错误，控制台应该注销我输入的内容，但不，它没有，页面只是重新加载，控制台中没有显示任何内容。我尝试通过像这样放置 event.preventDefault 来更改它

    <form
      onSubmit={(e) => {
        handleSubmit(onSubmit);
        e.preventDefault();
      }}
    >

它有助于防止页面重新加载，但仍然没有任何注销，我真的很困惑，因为之前没有人提到过这个错误，感谢任何帮助。

编辑：如果我删除 void 关键字，它将显示此错误

Answer 1

在调用handleSubmit内部的函数之前，应该删除void关键字：

<form onSubmit={handleSubmit(onSubmit)} >
  {children}
</form>

此外，无需阻止默认行为。 Handlesbumit 将自动处理该问题并仅返回表单数据本身:)

Answer 2

好的，我发现错误了。事实证明，我需要禁用 eslint 规则以允许 void 返回，因此我转到 .eslintrc.cjs 文件并将此行添加到规则中：

 "@typescript-eslint/no-misused-promises": [
      2,
      {
        "checksVoidReturn": {
          "attributes": false
        }
      },
    ]

现在可以了！