如何在反应中为选项选择器产品映射对象数组中的数据？答案

【问题标题】：How to map data from an array of objects for an options selector product in react?如何在反应中为选项选择器产品映射对象数组中的数据？
【发布时间】：2021-12-25 11:23:39
【问题描述】：

美好的一天，我是 react 新手，我需要帮助。

我只是尝试从 api 映射数据，目的是为产品创建选项。
只要特定概念（例如蓝牙、颜色、重量）的 api 数据具有简单的数组格式，我就可以做到： "bluetooth":["4.0","A2DP","LE"] 然后使用以下代码在选择器上呈现可供选择的选项
```
        <OptionsCss onChange={(e) => setSize(e.target.value)}>
        {product.bluetooth?.map((s) => (
          <FieldCss key={s}>{s}</FieldCss>
        ))}
```
但是，对于名为存储的概念，我无法获得可供选择的产品选项的值。这里的数组结构如下：

"storages":[{"code":2000,"name":"16 GB"},{"code":2001,"name":"32 GB"}] 在这里，我只需要例如 16GB 和 32GB 的值。所以按照以前的方式映射 api 给了我空的选择选项。

那么问题将是，我如何才能访问上述示例中的名称值之前？与之前的映射示例相比，我应该改变什么？

非常感谢！

【问题讨论】：

标签： arrays reactjs options variant

【解决方案1】：

当您通过数组进行映射时，您一次获得一个对象，然后您可以使用 storage.name 从该对象访问您想要的属性。

obj.storages.map(storage => storage.name)

因此，对于您的组件，您将拥有

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

【讨论】：

谢谢，这真的很有意义。不幸的是，我仍然无法检索选择选择器的存储名称值
hmm，你确定API返回什么，还有名字product？