本文介绍在 react 组件中，根据 `countrycode` 动态设置单选按钮（如 fitting）默认选中项的完整实现方案，重点解决 us 用户首次加载时应默认选中 "us" 而非硬编码 "uk" 的问题。
在电商类产品配置组件中，地区差异化逻辑十分常见。例如：当用户所在国家为美国（countryCode === 'US'）时，Fitting 选项应默认选中 "US"；而英国用户则默认 "UK"。但当前代码中，selectedOptions 的初始值（如 {Size: '14"', Fitting: 'UK'}）由 useProductOptions Hook 提供，且未感知 countryCode —— 这导致无法按需动态初始化。
关键在于：默认选中状态不应在渲染层（即 ProductOptionsDefault 组件内）硬编码或临时计算，而应在数据层（即自定义 Hook）中完成初始化逻辑。否则，checked={selectedOptions?.[name] === value} 将始终基于过时的默认值判断，无法响应地区变化。
✅ 正确做法：将 countryCode 注入 useProductOptions
修改自定义 Hook，使其接收 countryCode 并据此生成初始 selectedOptions：
// hooks/useProductOptions.ts
import { useState, useEffect } from 'react';
export function useProductOptions(countryCode: string = 'UK') {
// 基于 countryCode 设置各字段的默认值
const defaultOptions = {
Size: '14"',
Fitting: countryCode === 'US' ? 'US' : 'UK', // ? 核心逻辑在此
};
const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>(defaultOptions);
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) {
// ✅ 正确传递 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>
);
}⚠️ 注意事项与最佳实践
- 避免在渲染中推导默认值：不要写 const checked = (name === 'Fitting' && countryCode === 'US') ? value === 'US' : selectedOptions?.[name] === value —— 这会破坏单一数据源原则，且无法保证初始 selectedOptions 与 UI 同步。
-
确保 Hook 是“纯”的：若 countryCode 可能后续变更（如用户切换国家），需在 Hook 内使用 useEffect 监听并重置选项（根据业务需求决定是否允许重置）：
useEffect(() => { if (name === 'Fitting') { setSelectedOptions(prev => ({ ...prev, Fitting: countryCode === 'US' ? 'US' : 'UK' })); } }, [countryCode, name, setSelectedOptions]); - 服务端预判更优：对于 SSR 或静态生成场景，建议在服务端/构建时即注入正确的 initialSelectedOptions，避免客户端首次渲染闪动。
通过将地区逻辑下沉至数据层，不仅解决了默认选中问题，还提升了组件的可测试性与可维护性——所有状态派生逻辑集中、可预测、易扩展。
