Выбор ответа Middle Формы обновлено
Где вызывать useFormStatus
Вопрос
Почему pending здесь всегда false, даже пока save выполняется?
import { useFormStatus } from 'react-dom';
function Editor() {
const { pending } = useFormStatus();
return (
<form action={save}>
<input name="title" />
<button disabled={pending}>Сохранить</button>
</form>
);
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Хук читает родительскую <form, а этот компонент рендерит форму сам. useFormStatus смотрит на ближайшую форму выше по дереву.
Варианты ответа
- Хук читает родительскую
<form>, а этот компонент рендерит форму самправильный ответ useFormStatusработает с серверными функциями, аsaveклиентскаяpendingстановитсяtrueпри ошибке отправки, а не во время неё- Нужно передать форму в хук через ref:
useFormStatus(formRef)
Разбор
useFormStatus смотрит на ближайшую форму выше по дереву. Компонент, который сам возвращает <form>, её родителем не считает. Решение: вынести кнопку в отдельный компонент SubmitButton и вызвать хук там. Либо взять isPending из useActionState.
- С клиентскими async-функциями хук тоже работает.
pendingотражает выполнение отправки, а не ошибку.- Аргументов хук не принимает.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.