React中如何映射API返回的JSON数据，为商品详情页选择器提取目标字段值

问题原因&解决方法 #

你之前处理的size是普通字符串数组，遍历得到的s本身就是可直接渲染的字符串值，所以运行正常。处理颜色对象数组时出现问题主要有两个原因：

1. 字段名不匹配：你返回的JSON中颜色字段是colors（复数带s），你代码中写的product.color（单数无s）根本取不到对应数组
2. 取值方式错误：遍历对象数组得到的每一项是完整对象，React无法直接渲染对象，需要明确取对象下的name属性

修改后的代码示例如下，额外补充了React要求的遍历项key属性，避免控制台告警：

<FilterColor onChange={(e) => setColor(e.target.value)}>
  {product.colors?.map((colorItem) => (
    // 可根据你的业务需要，将value绑定为code或者name值
    <option key={colorItem.code} value={colorItem.code}>
      {colorItem.name}
    </option>
  ))}
</FilterColor>

如果你使用的FilterColor是自定义组件，不需要额外包裹option标签，直接在遍历的位置写{colorItem.name}取颜色名称即可。

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