本文讲解如何根据 `countrycode` 动态设置单选组（如 fitting）的默认选中值，重点在于将默认逻辑从组件内部上移至自定义 hook 中，确保状态初始化即符合业务规则（如 us → 默认 'us'，uk → 默认 'uk'）。
在电商类产品配置组件中，常需根据用户所在地区（如 countryCode）动态调整选项的默认值。例如：当 countryCode === 'US' 时，Fitting 选项应默认选中 'US'；而 countryCode === 'UK' 时，默认为 'UK'。但你当前的 ProductOptionsDefault 组件仅负责渲染与交互，默认选中状态实际由 useProductOptions() Hook 提供的 selectedOptions 决定——这意味着修改必须发生在状态初始化阶段，而非渲染时临时计算。
✅ 正确做法：在自定义 Hook 中注入 countryCode 并初始化默认值
首先，更新 useProductOptions Hook，使其支持接收 countryCode 参数，并据此设定初始 selectedOptions：
// hooks/useProductOptions.ts
import { useState, useEffect } from 'react';
export function useProductOptions(countryCode?: string) {
// 初始值根据 countryCode 动态推导
const initialOptions = {
Size: '14"',
Fitting: countryCode === 'US' ? 'US' : 'UK', // 关键逻辑：US → 默认 US
};
const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>(
initialOptions
);
const setSelectedOption = (name: string, value: string) => {
setSelectedOptions(prev => ({ ...prev, [name]: value }));
};
return {
selectedOptions,
setSelectedOption,
setSelectedOptions,
};
}然后，在组件中传入 countryCode：
// components/ProductOptionsDefault.tsx
export default function ProductOptionsDefault({
name,
values,
countryCode,
}: Props) {
// ✅ 将 countryCode 透传给 Hook，驱动默认值生成
const { setSelectedOption, selectedOptions } = useProductOptions(countryCode);
const handleChange = (optionName: string, optionValue: string) => {
setSelectedOption(optionName, optionValue);
};
return (
<fieldset key={name} className="mt-4">
<legend className="mb-3 text-sm font-medium text-dark">{name}</legend>
<div className="flex flex-wrap items-center gap-2">
{values.map((value) => {
const checked = selectedOptions?.[name] === value;
const id = `option-${name}-${value}`;
return (
<label key={id} htmlFor={id}>
<input
className="sr-only"
type="radio"
id={id}
name={`option[${name}]`}
value={value}
checked={checked}
onChange={() => handleChange(name, value)}
/>
<OptionButton checked={checked} label={value} />
</label>
);
})}
</div>
</fieldset>
);
}⚠️ 注意事项
- 避免在渲染中“覆盖”默认值：不要在 checked={...} 中写类似 checked={selectedOptions?.[name] === value || (name === 'Fitting' && countryCode === 'US' && value === 'US')} 的逻辑。这会导致视觉默认选中，但 selectedOptions 状态仍为旧值（如 'UK'），引发状态不一致、表单提交错误等问题。
-
Hook 必须可接受参数：确保 useProductOptions 是一个能接收 countryCode 的函数（而非无参 Hook），且其内部 useState(initialOptions) 依赖该参数——React 要求初始 state 计算必须是纯函数，推荐使用函数式初始化：
useState(() => ({ Size: '14"', Fitting: countryCode === 'US' ? 'US' : 'UK', })) - 服务端/SSR 场景注意：若 countryCode 来自服务端或用户偏好，确保它在首次渲染前已确定；否则可能触发 hydration mismatch。
✅ 总结
实现“按国家代码设默认选中”的核心原则是：把业务规则下沉到状态源头（即自定义 Hook），而非在 UI 层做修补。这样做不仅逻辑清晰、可测试性强，还能天然支持后续扩展（如新增 CA 国家默认 'CA'，只需修改 Hook 内部映射逻辑）。记住：组件负责“呈现状态”，Hook 负责“定义状态”。
