将 react-hook-form 与 typescript 和 material-ui 一起使用以显示错误消息的正确方法

Question

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

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

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

Answer 1

需要为表单数据定义一个数据类型并将其传递给'useForm'。

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

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

Right way of using react-hook-form with typescript and material-ui for showing error message