React中如何映射对象数组数据生成产品选择器的可选选项

你之前的写法仅适配字符串数组，storages数组的每一项是包含code和name属性的对象，直接渲染对象不会输出可见内容，只需在遍历的时候提取对应字段即可，修改后的代码如下：

<OptionsCss onChange={(e) => setSize(e.target.value)}>
  {product.storages?.map((storage) => (
    <FieldCss key={storage.code} value={storage.name}>
      {storage.name}
    </FieldCss>
  ))}
</OptionsCss>

修改点说明 #

• 遍历数据源从product.bluetooth替换为product.storages
• 遍历得到的每个项是存储规格对象，用storage.name提取要展示的容量文本
• 建议用唯一的storage.code作为key值，比用name更稳定，可避免重名导致的渲染异常
• 如果后续提交数据需要用到对应的code标识，只需把FieldCss的value属性改为storage.code即可

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