如何用所有图像获取所有信息

Question

我试图得到img数组的整个图像显示，但我不知道如何显示整个数组。我成功地得到了第一个元素

我的代码

import React from "react";
const product = [
{
_id: 1,
title: "hello",
img: [
"https://product.hstatic.net/1000075078/product/hong-tra-sua-tran-chau_326977_1fbd2f506b5e4355a864260e71331a8a.jpg",
"https://product.hstatic.net/1000075078/product/1645971848_img-9789_ded484268a734fe59dd9612a8c2167c2.jpg",
"https://product.hstatic.net/1000075078/product/1645971848_hong-tra-sua-tran-chau-da-lifestyle_da3374549eec4758bf1c282804cf45e7.jpg",
],
},
];
console.log(product);
const SingleProductComponent = () => {
return (
<div>
{product.map((item, index) => {
return (
<div key={index}>
<div>
<img src={item.img[0]} />;
</div>
<div>
{item.img.map((e) => {
<img src={e.image} />;
})}
</div>
</div>
);
})}
</div>
);
};
export default SingleProductComponent;

Answer 1

您也可以在内部数组上使用Array#map。注意，您应该考虑使用比索引更好的key。

const SingleProductComponent = () => (
<div>
{product.map((item, index) => (
<div key={index}>
<div>
{item.img.map((x, _idx) => <img key={_idx} src={x} />)}
</div>
</div>
);
)}
</div>
);