reactjs - 使用带有 typescript 和 material-ui 的 react-hook-form 来显示错误消息的正确方法

Question

我正在使用带有 typescript 和 material-ui 的 react-hook-form。我想将错误消息作为 tohelperText传递TextField。我试图这样做， helperText={errors.email?.message} 但打字稿抱怨这个任务。

Property 'email' does not exist on type 'NestDataObject<FormData>'.ts(2339)

我不想从我的 .eslintrc 文件中禁用此规则，因为它可能会忽略我的应用程序中的其他类似问题，这在某些地方可能是需要的。将 react-hook-form 的错误消息作为 helperText 分配给 material-ui 组件的正确方法是什么？

score 3 · Accepted Answer

需要为表单数据定义数据类型并将其传递给“useForm”。

type FormData = {
  email: string;
  password: string;
};

const { control, handleSubmit, errors } = useForm<FormData>();

1 回答 1