react-select传入字符串数组触发in运算符搜索options报错的解决方法

react-select 对options入参有固定格式要求：默认接收的是对象数组，每个选项对象必须包含label（下拉项展示文本）、value（选中后返回的选项值）两个核心字段。
你直接传入纯字符串数组时，组件内部遍历选项时会把单个字符串（比如Mumbai）当成配置对象做属性检测，才会触发Cannot use 'in' operator to search for 'options' in Mumbai的类型错误。

你可以任选以下一种方式修复：

• 方案1：提前把原字符串数组转换成组件要求的标准格式，再传入组件

  const locations = ['Mumbai', 'tuljapur', 'Bhagalpur', 'North East', 'Bongaigaon', 'South District', 'Pune', 'Cuttack', 'amritsar', 'East Godavari', 'Chandigarh']
  // 转换为符合react-select要求的选项结构
  const locationOptions = locations.map(item => ({
    label: item,
    value: item
  }))
  
  // 组件使用
  <Select
    className="ml-4 mb-4 w-[180px]"
    placeholder="School Name"
    options={locationOptions}
    name="class"
  />
  

• 方案2：保留原字符串数组结构，通过组件提供的自定义属性，告诉组件怎么读取选项的展示文本和值

  const locations = ['Mumbai', 'tuljapur', 'Bhagalpur', 'North East', 'Bongaigaon', 'South District', 'Pune', 'Cuttack', 'amritsar', 'East Godavari', 'Chandigarh']
  
  <Select
    className="ml-4 mb-4 w-[180px]"
    placeholder="School Name"
    options={locations}
    name="class"
    // 自定义返回下拉项展示的文本
    getOptionLabel={(option) => option}
    // 自定义返回选项选中时的实际值
    getOptionValue={(option) => option}
  />
  

如果你后续需要给选项加禁用、图标、分组等扩展能力，优先选择第一种方案，兼容性和扩展性更好。

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