从数据库中获取并通过 db 列中的数组进行映射

Posted 2023-03-23

【中文标题】从数据库中获取并通过 db 列中的数组进行映射

【英文标题】：Fetching from database and maping through array in db column

【发布时间】：2021-02-16 15:55:01

【问题描述】：

对不起，如果标题有点或不好。

但问题是我从我的数据库中获取并使用地图来显示每个产品，并且我在渲染的产品中有一个选择框，我试图从数据库中的数组进行映射。

我是这样取的：

fetch('/api/products')
    .then(res => res.json())
    .then(allProducts => 
        this.setState( allProducts );
);

我的地图是这样的：

this.state.allProducts.map(allProducts =>
                            
  <div className="products" key=allProducts.produkt_id>
                                
  <select name="format">
    <option value="choose_format">choose format</option>
                                        
  </select>

</div>
)

在我的数据库中，数组像这样存储在列中：

["car":"audi","car":"bmw"]

我如何将不同的汽车绘制为选项，或者我做错了什么，我可以以更好的方式存储它吗？

【参考方案1】：

 produkt_id: "123", car: "bwm" , color: ["color":"audi","color":"bmw"] 

您的渲染将是：

return this.state.allProducts.map((product) => (
    <div className="products" key=product.produkt_id>
      <select name="format">
        product.color.map((colorOption) => (
          <option value=colorOption.color>colorOption.color</option>
        ))
      </select>
    </div>
  ));

【讨论】：

produkt_id: "123", car: "bwm" , color: ["color":"red","color":"white"] 可能是数组中的颜色我可以稍后删除，所以它不必说两次颜色，但这是一个更好的例子，我现在如何拥有它，我想要显示汽车每种颜色的选项，我该怎么做？

我正在尝试您的解决方案，但我收到“TypeError: product.color.map is not a function”，你知道为什么吗？

告诉你 color 不是一个数组，所以它没有.map 函数。使用 console.log 进行调试。

非常感谢，使用 JSON.parse()，而不是 product.color.map 我不得不使用 JSON.parse(product.color).map