требуется вход
Войдите, чтобы смотреть видео
Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.
ВойтиСоздать аккаунт — бесплатноЗакончили урок?
Войдите, чтобы отмечать прогресс
Урок
Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.
ВойтиСоздать аккаунт — бесплатноЗакончили урок?
Войдите, чтобы отмечать прогресс
Логика:
Object.values(selectedByCategory) — превращает объект в массив значенийselectedByCategory имеет структуру: { cpu: Component|null, gpu: Component|null, ... }.filter() убирает null значения (невыбранные категории) с type guard.map() извлекает id каждого компонента["1", "22", "7", "15", "31", "42", "56", "71"]selectedByCategory тип:
Применение: componentIds.join(',') → <input name="componentIds" value="1,22,7,15..."/> → FormData для Server Action.
Пересчитывает только при изменении выбора комплектующих, оптимизируя производительность.
useActionState — новый React хук из Next.js 16 для работы с Server Actions, заменяет useFormState + ручную передачу action.
Возвращает:
state — текущее состояние (результат выполнения action)formAction — привязанный action для <form action={formAction}>isPending — состояние выполнения (заменяет useFormStatus().pending)state типизирован через return Server Action<form> — не нужны react-hook-form/zod_prevState — позволяет читать предыдущее состояние на сервереПреимущество над старым подходом: одна строка связывает форму + состояние + pending + ошибки без внешних библиотек.