Контролируемый элемент SELECT теряет значение после подачи формы с помощью USEACTIONSTATE в next.js ⇐ Javascript

[Anonymous]

Я строю форму-я использую настройку сервера UseCtionState Server-которая должна сохранять свои значения во время представлений. Проблема в том, что я не могу использовать опору DefaultValue на элементе, потому что мне нужно, чтобы она была контролируемым компонентом, чтобы я мог динамически обновить ее на стороне клиента. Я попытался сделать управление с помощью локального состояния, но затем состояние сервера не применяется правильно после подачи. Это просто возвращается к начальному стату. < /P>
Что я могу сделать в этой ситуации? Перейти к селекторам запросов JavaScript? После того, как он снова отправился, он подчиняется сначала неверный опция Select ("mini"). < /P>
форма: < /p>
"use client";

import { useActionState, useEffect, useState } from "react";
import { saveFormData } from "./actions";

type FormState = {
group: string;
};

const defaultState: FormState = {
group: "Junior",
};

export default function FormExample() {
const [state, formAction] = useActionState(saveFormData, defaultState);

const [group, setGroup] = useState(state.group);

useEffect(() => {
if (state.group !== group) {
setGroup(state.group);
}
}, [state.group]);

return (


Group:
setGroup(e.target.value)}
>
Mini (11–12)
Junior (12–14)
Senior (15+)




Submit


);
}
< /code>
Действие сервера: < /p>
"use server";

export async function saveFormData(prevState: unknown, formData: FormData) {
const group = String(formData.get("group"));

console.log("group on server: ", group);

// Persist values here (e.g., database, cookies, etc.)
return { group };
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... ctionstate