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

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

⚠️ 注意事项与最佳实践

• 避免在渲染中推导默认值：不要写 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，避免客户端首次渲染闪动。

通过将地区逻辑下沉至数据层，不仅解决了默认选中问题，还提升了组件的可测试性与可维护性——所有状态派生逻辑集中、可预测、易扩展。