Next.js+TypeScript+Tailwind单选组默认选中状态异常Bug求助

核心问题 #

你遇到的选中状态短暂显示后消失的问题，根源在于混用了受控组件和非受控组件的属性：

• 你的组件依赖父组件传入的selectedSocialValue控制选中状态，属于受控组件，但单选框用了defaultChecked（非受控组件的初始值属性）
• Next.js在 hydration 阶段会先根据defaultChecked渲染初始状态，之后父组件的状态同步/更新会覆盖这个非受控初始值，导致选中状态消失

另外还有一个潜在类型错误：handleChange的参数类型写为React.ChangeEvent，未明确为React.ChangeEvent<HTMLInputElement>，访问event.target.id会触发类型警告。

修复方案 #

1. 将单选框的defaultChecked替换为checked，让组件完全受控于父组件的selectedSocialValue
2. 修正handleChange的参数类型
3. 确保父组件中selectedSocialValue的初始值正确且稳定（比如用useState设置默认值，或从服务器端传递正确的默认ID）

修改后的组件代码 #

'use client'

interface SocialValueGroupProps {
    selectedSocialValue : string,
    handleSelectValue : (value: string) => void
}

const SocialValueGroup = (props: SocialValueGroupProps) => {

    const socialValues: { id: string, name: string }[] = [
        { id: "work_score", name: "Importance of work" }, 
        { id: "fam_score", name: "Importance of family" },
        { id: "religion_score", name: "Importance of religion"},
        { id: "gender_equality", name: "Importance of gender equality"},
        { id: "ethnic_rel_tolerance", name: "Ethnic and religious tolerance"},
        { id: "sex_minority_tolerance", name: "Tolerance of sexual minorities"}]

    // 修正参数类型
    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
        props.handleSelectValue(event.target.id)
    }

    return (
        <div className="w-full">
            <fieldset>
                <div className='grid-cols-1 px-5 mt-5'>
                    <h2 className='text-black text-2xl'>Select a social value</h2>
                    {socialValues.map((socialValue) => (
                        <div key={socialValue.id} className='px-5 my-2'>
                            <input
                                type="radio"
                                id={socialValue.id}
                                value={socialValue.name}
                                name="social_value"
                                className="hidden peer"
                                onChange={handleChange}
                                // 替换defaultChecked为checked
                                checked={props.selectedSocialValue === socialValue.id}
                            />
                            <label
                                htmlFor={socialValue.id}
                                className="block w-full px-4 py-2 rounded-full bg-gray-300 text-gray-800 cursor-pointer hover:bg-gray-400 transition-colors
                         peer-checked:bg-indigo-300"
                            >
                                {socialValue.name}
                            </label>
                        </div>
                    ))}
                </div>
            </fieldset>
        </div>
    )
}

export default SocialValueGroup

额外注意事项 #

• 父组件中要确保selectedSocialValue的初始值和你期望的默认选项ID完全一致（比如默认选"work_score"，父组件状态初始值就要设为"work_score"）
• 如果selectedSocialValue是从服务器获取的数据，要确保在客户端 hydration 前拿到正确值，避免 hydration 不匹配

内容的提问来源于stack exchange，提问作者Adrian Puşcuţă