本文讲解如何在 react 组件中根据 `countrycode` 动态设置单选按钮（如 fitting）的默认选中状态，重点解决当 `countrycode === 'us'` 时自动将 `'us'` 设为 `fitting` 的初始选中值，同时保持 uk 用户默认为 `'uk'`。
在当前实现中，selectedOptions（例如 {Size: '14"', Fitting: 'UK'}）由自定义 Hook useProductOptions() 提供，而组件本身仅负责渲染和响应变更。关键点在于：默认选中逻辑不应放在渲染层（即 ProductOptionsDefault 组件内），而应下沉至状态管理层——即 useProductOptions Hook 中统一初始化。否则，组件每次渲染都会依赖外部 props 计算 checked，不仅违背单一数据源原则，还可能导致初始状态不一致或 useEffect 依赖混乱。
✅ 正确做法：在 Hook 中注入 countryCode 并初始化默认值
修改 useProductOptions，使其接收 countryCode 并据此设定 Fitting 的初始值：
// hooks/useProductOptions.ts
import { useState, useEffect } from 'react';
export function useProductOptions(countryCode: string = 'UK') {
// 从 localStorage 或服务端获取初始值（如有），否则使用基于 countryCode 的默认值
const initialFitting = countryCode === 'US' ? 'US' : 'UK';
const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({
Size: '14"',
Fitting: initialFitting, // ← 关键：动态初始化
});
const setSelectedOption = (name: string, value: string) => {
setSelectedOptions(prev => ({ ...prev, [name]: value }));
};
return {
selectedOptions,
setSelectedOption,
};
}随后，在组件中直接传入 countryCode：
// ProductOptionsDefault.tsx
export default function ProductOptionsDefault({
name,
values,
countryCode,
}: Props) {
// ✅ 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>
);
}⚠️ 注意事项与最佳实践
- 避免在渲染中计算默认值：不要在 map 内通过 countryCode === 'US' && name === 'Fitting' ? value === 'US' : selectedOptions?.[name] === value 这类逻辑判断 checked —— 这会导致初始渲染时 selectedOptions.Fitting 仍为 'UK'，UI 与状态不同步。
- 确保 Hook 初始化时机正确：useProductOptions(countryCode) 应在组件挂载时执行一次，且 countryCode 需为稳定值（若来自异步加载，请配合 useEffect + loading 状态处理，或使用 useMemo 缓存初始化结果）。
-
扩展性考虑：未来如需支持更多国家（如 CA、AU），可将默认映射抽离为配置对象：
const DEFAULT_FITTING_BY_COUNTRY: Record<string, string> = { US: 'US', UK: 'UK', CA: 'US', // 加拿大沿用 US 标准 AU: 'UK', }; const initialFitting = DEFAULT_FITTING_BY_COUNTRY[countryCode] ?? 'UK';
通过将默认值逻辑前置到状态 Hook，你不仅解决了当前需求，更构建了可维护、可测试、符合 React 数据流规范的状态管理方案。
