З
Заметки про React
@ru_react_notes4.1K подп.
3.2Kпросмотров
79.1%от подписчиков
23 января 2025 г.
Score: 3.6K
Делаем использование FormData типобезопасным Новый хук useActionState в React 19 позволяет обрабатывать отправку данных в формах, пример: export default function Page() { const [_, action, pending] = useActionState((_: unknown, formData: FormData) => { const firstName = formData.get("firstName"); const age = formData.get("age"); }, null); return ( <form action={action}> <input type="text" name="firstName" /> <input type="number" name="age" /> <button type="submit" disabled={pending}>Submit</button> </form> ); } При отправке формы в колбек хука приходит объект типа FormData. В примере formData.get может принимать любой string и нет уверенности что этот string совпадает с именем поля на форме. Для решения этой проблемы, автор предлагает создать компонент поля, которое принимает дженерик с названиями полей и создать функцию получения значения из FormData, которое также принимает дженерик. Пример: type FormName = "firstName" | "age"; const get = <Name extends string = never>( formData: FormData, name: NoInfer<Name> ) => formData.get(name); export default function Page() { const [_, action] = useActionState((_: unknown, formData: FormData) => { const firstName = get<FormName>(formData, "firstName"); const age = get<FormName>(formData, "age"); }, null); return ( <form action={action}> <SaveInput<FormName> type="text" name="firstName" /> <SaveInput<FormName> type="number" name="age" /> <button type="submit">Submit</button> </form> ); } Теперь тип FormName связывает поля на форме и FormData, так что больше нет риска опечаток. https://www.typeonce.dev/article/make-form-data-and-input-names-type-safe-in-react
3.2K
просмотров
1726
символов
Нет
эмодзи
Нет
медиа

Другие посты @ru_react_notes

Все посты канала →
Делаем использование FormData типобезопасным Новый хук useAc — @ru_react_notes | PostSniper