React中根据组件Props动态初始化string/string[]类型useState状态的正确方式

其实你要的是让状态类型完全跟着Props走，而不是同时兼容两种类型对吧？之前用联合类型的问题在于，TypeScript会一直认为这个状态可能是string或者string[]，每次使用都得做额外的类型校验，完全达不到“动态确定单一类型”的效果。下面给你两种靠谱的实现方式：

方案一：用泛型组件显式指定类型 #

给你的组件定义一个泛型参数，让它直接继承string | string[]，这样状态的类型就能和组件接收的Props类型完全绑定：

// 定义组件Props，用泛型T来约束选中值的类型
type SelectComponentProps<T extends string | string[]> = {
  defaultValue?: T;
  // 这里可以添加你需要的其他Props，比如选项列表、回调函数等
};

function SelectComponent<T extends string | string[]>(props: SelectComponentProps<T>) {
  // 初始化状态时直接用泛型T，默认值优先用Props传入的defaultValue，否则根据类型适配
  const [selectedOptions, setSelectedOptions] = useState<T>(
    props.defaultValue ?? (typeof props.defaultValue === 'string' ? '' : []) as T
  );

  // 后续使用selectedOptions时，TS会明确知道它是单一类型（要么string要么string[]）
  const handleSubmit = () => {
    // 不用做类型判断，直接用就行
    console.log(selectedOptions);
  };

  return <div>{/* 你的组件逻辑 */}</div>;
}

// 父组件使用时，要么显式指定泛型，要么TS自动推导
// 比如要string类型的状态
<SelectComponent<string> defaultValue="default" />
// 要string[]类型的状态
<SelectComponent<string[]> defaultValue={["option1"]} />

方案二：通过Props字段自动推导类型 #

如果你的组件有类似isMultiple这样的字段来控制是否多选，那可以用TypeScript的条件类型，自动根据这个字段推导状态类型：

// 定义Props，包含isMultiple字段
type SelectComponentProps = {
  isMultiple: boolean;
  defaultValue?: string | string[];
};

function SelectComponent(props: SelectComponentProps) {
  // 根据isMultiple的值自动推导状态类型
  type SelectedType = typeof props.isMultiple extends true ? string[] : string;

  // 初始化状态时，根据isMultiple设置对应默认值
  const initialValue = props.defaultValue ?? (props.isMultiple ? [] : '');
  const [selectedOptions, setSelectedOptions] = useState<SelectedType>(
    initialValue as SelectedType
  );

  // 使用时TS会明确知道类型：isMultiple为true时是string[]，false时是string
  const handleChange = (value: SelectedType) => {
    setSelectedOptions(value);
  };

  return <div>{/* 你的组件逻辑 */}</div>;
}

// 父组件使用时，只需传入isMultiple，TS自动推导状态类型
<SelectComponent isMultiple={false} defaultValue="default" />
<SelectComponent isMultiple={true} defaultValue={["option1"]} />

为什么之前的联合类型不行？ #

你之前写的useState<string[] | string>([])会让TS把selectedOptions标记为可能是两种类型中的任意一种，所以每次使用它的时候都得做类型判断（比如Array.isArray(selectedOptions)）才能调用数组方法或者字符串方法，完全达不到“根据Props动态确定单一类型”的需求。而上面两种方案，能让TS在编译时就确定状态的具体类型，使用起来更丝滑~

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