单选按钮在提交表单后未选中，即使受控状态显示为选中状态

Question

我在无线电输入方面遇到了一个奇怪的问题。我在 Next 15 (React 19) 中形成了受控状态。我遇到的问题是，当我提交表单时，选中的无线电输入突然显示为未选中。但 React 状态显示它仍在检查中。

我看到React 19表单在提交时会自动清除，所以我从不受控制的状态变成了受控制的状态。因为如果操作返回任何验证错误，我不想清除表单。这符合我对文本输入的预期。

步骤：

1. 查看广播 1
2. 点击提交按钮
3. 操作返回有错误的状态
4. Radio 1 在渲染中未选中
5. console.log 仍然显示

   formValues.searchType = 1

6. 条件部分 1 仍然呈现渲染状态

"use client"

...

const defaultState = {
    errors: [],
    fieldValues: {
        searchType: "",
    }
};


export default function SomeForm() {
    const [actionState, formAction, isPending] = useActionState(importedAction, defaultState);
    const [formValues, setFormValues] = useState(defaultState.fieldValues);

    console.log(formValues.searchType);

    const handleRadioOption = (e: ChangeEvent<HTMLInputElement>) => {
        setFormValues({
            ...defaultState.fieldValues, 
            searchType: e.currentTarget.value
        });
    }

return (
    <Form action={formAction}>
        <fieldset>
            <legend>Select an option</legend>
            <input
                type="radio"
                id="option1-radio"
                label="Search by 1"
                aria-controls="conditional-1"
                name="searchType"
                value="1"
                onChange={handleRadioOption}
                checked={formValues.searchType === "1"}
            />
            {formValues.searchType === "1" && <div id="conditional-1">conditional section 1</div>}
            <input
                type="radio"
                id="option2-radio"
                label="Search by 2"
                aria-controls="conditional-2"
                name="searchType"
                value="2"
                onChange={handleRadioOption}
                checked={formValues.searchType === "2"}
            />
            {formValues.searchType === "2" && <div id="conditional-2">conditional section 2 </div>}
        </fieldset>

        <button disabled={isPending}>Continue</Button>
    </Form>
);


}

我希望无线电输入根据

checked

属性呈现为选中或未选中，但在提交表单后它总是显示为未选中。

我尝试过使用

defaultValue

不受控制的状态，但我还需要控制条件部分的渲染，所以这不是一个选项。

我尝试了普通的

<form/>

元素以及 Next

<Form/>

但都有这个问题

Answer 1

单选按钮中的

checked

使用 === 正确检查相等性，这意味着它还会比较类型。难道你的

formAction

正在将

formValues.searchType

转换成

number

？