Этот вопрос проверяет знание концепции action
action обрабатывает POST, PUT, DELETE и другие запросы для маршрута. Он используется для выполнения операций, таких как отправка формы или обновление данных, и возвращает результат операции, доступный в компоненте.
Определение action:
Это функция, вызываемая при запросе POST или PUT на соответствующий маршрут.
const saveData = async ({ request }) => {
const formData = await request.formData();
const response = await fetch('/api/save', {
method: 'POST',
body: JSON.stringify(Object.fromEntries(formData)),
headers: { 'Content-Type': 'application/json' },
});
if (!response.ok) throw new Error('Failed to save data');
return response.json();
};Пример использования action:
Настройте маршрут с action:
const router = createBrowserRouter([
{
path: "/form",
element: <Form />,
action: saveData,
},
]);Обработка отправки формы:
Используйте <Form> из React Router:
import { Form } from 'react-router-dom';
const FormComponent = () => (
<Form method="post">
<input name="name" type="text" />
<button type="submit">Отправить</button>
</Form>
);Получение результата:
Результат операции доступен через useActionData.
import { useActionData } from 'react-router-dom';
const Form = () => {
const result = useActionData();
return result ? <p>Данные сохранены</p> : null;
};Итог: action упрощает обработку запросов, связанных с изменением данных, и интегрируется с маршрутизацией.