在React-Select函数式组件中设置默认值：美国州选择可复用组件实现问题

我帮你排查了代码里的问题，核心原因是react-select的默认值要求是完整的选项对象，而非单独的value字符串，再加上组件状态初始化的逻辑偏差，导致默认值无法正确设置。咱们一步步来修复：

问题拆解 #

你传入的"OH"是单个字符串，但react-select的value（受控模式）或defaultValue（非受控模式）需要匹配options数组里的完整对象结构，所以直接传字符串肯定无法匹配选中项。

修复步骤 #

1. 调整SelectState为受控组件，正确初始化状态

把组件改成受控模式，用props传入的完整选项对象初始化状态，而非空值：

export function SelectState(props: any) {
  // 用props传入的默认选项对象初始化状态
  const [selected, setSelected] = useState(props.defaultOption);
  
  return (
    <StyledSelect
      {...props}
      styles={styles}
      value={selected}
      placeholder="Select a State"
      onChange={(item: any) => {
        setSelected(item);
        props.onChange(item.value);
      }}
      // 保持options的结构统一：{ label: ..., value: ... }
      options={props.options.map((item: any) => ({ 
        label: `${item.value} - ${item.label}`, 
        value: item.value 
      }))}
    />
  );
};

2. 在父组件中根据state值匹配完整选项对象

在StateSelectDropDown里，根据传入的state字符串（比如"OH"），从USStates数组中找到对应的完整选项对象，再传给子组件：

export default function StateSelectDropDown(props: any) {
  // 根据props.state找到对应的选项对象
  const defaultOption = USStates.find(state => state.value === props.state);
  
  return (
    <Fragment>
      <SelectState 
        isSearchable 
        defaultOption={defaultOption} 
        options={USStates} 
        onChange={(item: any) => { alert(item); }} 
      />
    </Fragment>
  );
}

3. 修正页面调用的组件名称

你页面里写的<StateDropDown state="OH" />和导出的组件名称StateSelectDropDown不匹配，统一名称：

<div>
  <StateSelectDropDown state="OH" />
</div>

为什么之前的代码不生效？ #

• 你给SelectState传的defaultValue是字符串"OH"，但react-select需要的是和options结构一致的对象，无法匹配；
• SelectState内部的selected状态初始值为空，作为受控组件的value优先级更高，直接覆盖了defaultValue的作用。

修改完成后，当你传入state="OH"时，组件会自动匹配到对应的选项对象，并设置为默认选中值。

内容的提问来源于stack exchange，提问作者Dennis