React+TS项目中用数组渲染Antd Select选项为空如何解决

你的代码中Array.map的回调函数没有返回JSX节点：箭头函数用大括号包裹函数体时，必须手动写return返回值，你现在的写法里<Option />写了但没有返回，map最终生成的是全为undefined的数组，Select组件拿不到有效Option子元素，所以下拉为空。
另外你漏了列表渲染必须的key属性，会触发React的列表渲染警告。

两种写法二选一即可：

• 用箭头函数简洁返回（去掉大括号，直接返回元素，适合没有额外逻辑的场景）

<Select
  id="location"
  placeholder="Location"
>
  {user.locations.map((loc) => (
    <Option key={loc.name} value={loc.name}>{loc.name}</Option>
  ))}
</Select>

• 保留大括号加日志逻辑，手动加return

<Select
  id="location"
  placeholder="Location"
>
  {user.locations.map((loc) => {
    console.log('got -> ' + loc.name);
    return <Option key={loc.name} value={loc.name}>{loc.name}</Option>;
  })}
</Select>

如果user数据是接口异步返回的，初始加载阶段user.locations可能为undefined，可以加可选链做兜底，避免渲染报错：

{user.locations?.map((loc) => (
  <Option key={loc.name} value={loc.name}>{loc.name}</Option>
))}

如果loc.name存在重复可能，建议用location的唯一标识（比如id）作为key和value，避免选项选中异常。

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