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

Question

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

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

我是这样取的：

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"}]

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

Answer 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>
  ));