Правильный способ использования формы response-hook с typescript и material-ui для отображения сообщения об ошибке

Я использую форму реакции-крючка с машинописным текстом и пользовательским интерфейсом материала. Я хотел передать сообщение об ошибке как helperText на TextField. Я пытался сделать это с помощью helperText={errors.email?.message}, но машинописный текст жалуется на это задание.

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

Я не хочу отключать это правило в моем файле .eslintrc, потому что оно может игнорировать другие подобные проблемы в моем приложении, что может быть желательно в некоторых местах. Как правильно назначить сообщение об ошибке response-hook-form в качестве helperText компонентам material-ui?

ссылка на codeandbox https://codesandbox.io/s/material-ui-react-form-hook-yi669


reactjs typescript material-ui react-hook-form
person Mahesh    schedule 14.03.2020    source источник
comment
У вас нет адреса электронной почты, указанного в вашем FormData типе.   -  person Hunter McMillen    schedule 14.03.2020
comment
Верно, но как это правильно определить? FormData из пакета react-hook-form.   -  person Mahesh    schedule 14.03.2020
comment
Ой. Спасибо @HunterMcMillen за подсказку. Теперь работает. Отправка ответа.   -  person Mahesh    schedule 14.03.2020
comment
Нет, вы определили его в строке 5 app.tsx: type FormData = { firstName: string; lastName: string; };   -  person Hunter McMillen    schedule 14.03.2020
comment
да. обновил свою собственную песочницу, но затем вернулся и разветвил другую для ответа. Спасибо за помощь @HunterMcMillen.   -  person Mahesh    schedule 14.03.2020

Ответы (1)


arrow_upward
3
arrow_downward

Необходимо определить тип данных для данных формы и передать его в useForm.

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

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

Обновленная песочница: https://codesandbox.io/s/material-ui-react-form-hook-answer-8cxc1

person Mahesh    schedule 14.03.2020
comment
Спасибо, сэр, после нескольких часов без решения это работает отлично! - person CodeMemory; 01.04.2020