正确地使用带有类型脚本和材质用户界面的react-hook-form来显示错误消息

Question

我正在使用带有打字稿和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组件的正确方法是什么？

codesandbox链接 https://codesandbox.io/s/material-ui-react-form-hook-yi669

Answer 1

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

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

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

更新的沙箱：https://codesandbox.io/s/material-ui-react-form-hook-answer-8cxc1