Выбор ответа Middle Формы обновлено
Аргументы функции в useActionState
Вопрос
Форма отправлена, но formData.get падает с ошибкой «formData.get is not a function». Почему?
async function save(formData) {
const title = formData.get('title');
await api.save(title);
return { ok: true };
}
function Editor() {
const [state, formAction, isPending] = useActionState(save, null);
return (
<form action={formAction}>
<input name="title" />
<button disabled={isPending}>Сохранить</button>
</form>
);
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Action получает первым аргументом прошлое состояние, FormData вторым. Сигнатура action для useActionState: (prevState, formData) = newState.
Варианты ответа
useActionStateработает лишь с серверными функциями, аsaveклиентская- Нужно вызывать
formAction(formData)вручную вonSubmitформы FormDataнедоступен в клиентских компонентах, только на сервере- Action получает первым аргументом прошлое состояние,
FormDataвторымправильный ответ
Разбор
Сигнатура action для useActionState: (prevState, formData) => newState. Здесь первым параметром пришёл null (начальное состояние), а у него нет метода get. Исправление: async function save(prev, formData).
useActionStateработает и с обычными клиентскими async-функциями.formActionпередаётся вactionформы, React сам вызовет его сFormData.FormDataэто обычный браузерный API.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.