我怎样才能只渲染我的对象数组中的第一张图像？

Question

我有一组包含产品详细信息的对象。在对象上，有一个对象的图像数组属性，其中所有具有 id 的图像都在那里。 我正在尝试仅渲染该对象数组中的第一张图像。我尝试设置 0 个索引以仅渲染第一个对象，但出现错误。

我的数据库：

[
{
    _id: "asdasdds",
    title: "Title",
    reg_price: string
    images: [
        {
            id: "a1e73da66ddb9191984e3128b0df78af"
            src: "https://res.cloudinary.com/df8velsbs/image/upload/v1645508032/uts3xxi6wbckrjzjsrgx.png"
        },
 {
            id: "a1e73da66ddb9191984e3128b0df78af"
            src: "https://res.cloudinary.com/df8velsbs/image/upload/v1645508032/uts3xxi6wbckrjzjsrgx.png"
        },
    ]
},
{
    _id: "asdasdds",
    title: "Title",
    reg_price: string
    images: [
        {
            id: "a1e73da66ddb9191984e3128b0df78af"
            src: "https://res.cloudinary.com/df8velsbs/image/upload/v1645508032/uts3xxi6wbckrjzjsrgx.png"
        },
 {
            id: "a1e73da66ddb9191984e3128b0df78af"
            src: "https://res.cloudinary.com/df8velsbs/image/upload/v1645508032/uts3xxi6wbckrjzjsrgx.png"
        },
{
            id: "a1e73da66ddb9191984e3128b0df78af"
            src: "https://res.cloudinary.com/df8velsbs/image/upload/v1645508032/uts3xxi6wbckrjzjsrgx.png"
        },
    ]
}
]

这是我的代码：当我设置 0 索引时 product.images[0] 我得到地图不存在的错误。

{
        products.map(product => {
            return <tr>
                <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                    <div className="flex items-center">
                        <div className="flex-shrink-0 w-10 h-10">

                            {                  
                                product.images[0].map(({ src }) => <img className="w-full h-full rounded-full"
                                    src={src}
                                    alt="" />)
                            }
                        </div>

                    </div>

Answer 1

您根本不需要映射。直接引用 0 索引元素的 src 属性

{products.map(product => (
  <tr>
    <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
      <div className="flex items-center">
        <div className="flex-shrink-0 w-10 h-10">
          <img
            alt=""
            className="w-full h-full rounded-full"
            src={product.images[0]?.src ?? "some-placeholder.png"}
          />
        </div>
      </div>
    </td>
  </tr>
)}

我怎样才能只渲染我的对象数组中的第一张图像？

How can i render only first image from my array of objects?

javascript

arrays

javascript-objects

reactjs

react-typescript