React中如何将服务器返回的JSON数据正确渲染为Select下拉选项

先核对以下几个常见出错点，按顺序排查即可解决：

• 首先确认props.availableData的实际值：服务器请求是异步的，首次渲染时availableData大概率是空数组/undefined，你可以在代码中加console.log(props.availableData)，确认控制台输出的是你预期的包含symbol字段的对象数组。如果数据未正确注入到props，需要先修复上游数据传递/请求逻辑。
• 列表渲染必须加唯一key属性：React中map遍历渲染列表项时必须给每一项加唯一key，属于强制规范，未加可能导致渲染异常。
• 注意Select组件的子元素规范：如果你用的是Ant Design、Element UI之类的UI库Select组件，默认子组件是大写开头的Option，不是原生的小写option标签，标签名写错会导致组件不识别子内容，直接渲染为空。

修复后代码示例 #

场景1：使用原生HTML select #

// 加可选链防止availableData为undefined时map报错，加加载兜底
<select value={props.selectedData}>
  {props.availableData?.length ? 
    props.availableData.map((option) => (
      <option key={option.symbol} value={option.symbol}>{option.symbol}</option>
    )) : 
    <option disabled>数据加载中...</option>
  }
</select>

场景2：使用UI库的Select组件（以Ant Design为例） #

先引入UI库配套的Option组件：

import { Select } from 'antd';
const { Option } = Select;

// 渲染代码
<Select value={props.selectedData}>
  {props.availableData?.map((option) => (
    <Option key={option.symbol} value={option.symbol}>{option.symbol}</Option>
  ))}
</Select>

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