如何为美国用户自动设置“Fitting”选项的默认选中值

本文讲解如何在 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>({     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 (     
       
{name}
       
         {values.map((value) => {           const checked = selectedOptions?.[name] === value;           const id = `option-${name}-${value}`;           return (                             handleChange(name, value)}               />                                       );         })}       
     
   ); }

⚠️ 注意事项与最佳实践

• 避免在渲染中计算默认值：不要在 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 = {   US: 'US',   UK: 'UK',   CA: 'US', // 加拿大沿用 US 标准   AU: 'UK', }; const initialFitting = DEFAULT_FITTING_BY_COUNTRY[countryCode] ?? 'UK';

通过将默认值逻辑前置到状态 Hook，你不仅解决了当前需求，更构建了可维护、可测试、符合 React 数据流规范的状态管理方案。