無法訪問 JavaScript 中的嵌套數組 object 屬性

Question

我正在嘗試顯示產品數組信息，例如來自categories object 的name圖像url這是 object 的結構。

{
  "categories": [
    {
      "__typename": "Category",
      "categoryId": "aeb50ed6-580d-a065-383a-e3932fbec6a1",
      "name": "Electronics",
      "products": [
        {
          "__typename": "Product",
          "productId": "f1ea5d7a-c26e-d850-52b5-9ac4c19668f2",
          "name": "Small Soft Salad",
          "price": 841,
          "discount": 23,
          "unitsSold": 5,
          "images": [
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/511dBXGmAtL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71MIvKxxSvL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81loLb-NTYL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81goU9h-jnL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/61pUul1oDlL._AC_UL320_.jpg"
            }
          ]
        },
        {
          "__typename": "Product",
          "productId": "b2d38cf6-b8c7-6449-e13a-8ef3bdd12dd0",
          "name": "Tasty Plastic Pants",
          "price": 250,
          "discount": 44,
          "unitsSold": 2,
          "images": [
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/511dBXGmAtL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/61pUul1oDlL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/61S0sV1a57L._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81WnMBnbWSL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71266hQjO8L._AC_UL320_.jpg"
            }
          ]
        },
        {
          "__typename": "Product",
          "productId": "4ac166a1-9636-d299-e7a6-13a9c451582c",
          "name": "Fantastic Plastic Pizza",
          "price": 192,
          "discount": 26,
          "unitsSold": 18,
          "images": [
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81WFWi9sKlL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71ZE0VUjkSL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81WnMBnbWSL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/61S0sV1a57L._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81zbIt0p5qL._AC_UL320_.jpg"
            }
          ]
        },
        {
          "__typename": "Product",
          "productId": "c9f91096-4e77-30e8-fbde-c14f97d25d77",
          "name": "Tasty Rubber Car",
          "price": 611,
          "discount": 4,
          "unitsSold": 27,
          "images": [
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81WFWi9sKlL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71WCgLmDx7L._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71nJ48O6aFL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/81goU9h-jnL._AC_UL320_.jpg"
            },
            {
              "__typename": "ProductImage",
              "url": "https://shoplly-api.techawks.io/storage/71MIvKxxSvL._AC_UL320_.jpg"
            }
          ]
        },

這是我試圖訪問產品數組的name和圖像url 。

import React from "react";
import { useQuery, gql } from "@apollo/client";
import useStore from "./store/store";

const PRODUCT_QUERY = gql`
  {
    categories {
      categoryId
      name
      products {
        productId
        name
        price
        discount
        unitsSold
        images {
          url
        }
      }
      subCategories {
        name
        subCategoryId
        categoryId
      }
    }
  }
`;

const Hero = () => {
  const filter = useStore((state) => state.filter);
  const furniture = useStore((state) => state.furnitures);
  const electronic = useStore((state) => state.electronics);
  const accessorie = useStore((state) => state.accessories);
  const vehicle = useStore((state) => state.vehicles);
  const fashion = useStore((state) => state.fashions);
  const { data, loading, error } = useQuery(PRODUCT_QUERY);
  console.log(JSON.stringify(data, null, 2));
  return (
    <div>
      <div className="flex space-x-10 justify-center items-center">
        <div onClick={furniture}>Furnitires</div>
        <div onClick={electronic}>Electroinics</div>
        <div onClick={accessorie}>Vehicles</div>
        <div onClick={vehicle}>Accessories</div>
        <div onClick={fashion}>Fashion</div>
      </div>
      <div className="flex space-x-16 p-4 mt-10">
        <div className=" w-64  bg-green-500">
          {data?.categories[filter]?.subCategories?.map((launch) => (
            <div key={launch.name}>{launch.name}</div>
          ))}
        </div>
        <div className="flex-1 p-10 font text-2xl  bg-green-500 ">
          {" "}
          <div className="grid grid-cols-2 gap-2">
            {data?.categories[filter]?.products?.map((products) => (
              <div className="" key={products.name}>
                <div className="  bg-white rounded">
                  <div>{products?.name}</div>
                  <div>{products?.price}</div>
                  <div>
                    <img src={products?.images?.url} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;

所以，我可以顯示產品name ，但不能顯示產品圖片url 。

我該怎么做才能顯示產品圖片url及其產品name ？

謝謝

Answer 1

圖片本身是一個對象數組，因此需要再次對它進行 map

<div>
  {products?.images.map((img) => <img src={img.url} />)}
</div>   

       

如果您只想顯示一張圖片，那也是第一張圖片，那么我們可以按照@ray 評論進行操作

<div>
  <img src={products?.images[0]?.url} />
</div>

Answer 2

圖像是一個包含多個圖像的數組。 您需要在陣列上使用輔助 map 才能訪問每個 object 上的 URL。

{data?.categories[filter]?.products?.map((products) => (
              <div className="" key={products.name}>
                <div className="  bg-white rounded">
                  <div>{products?.name}</div>
                  <div>{products?.price}</div>
                  <div>
                    {products.images.map((img) =>
                       <img src={img.url} />
                      )}
                  </div>
                </div>
              </div>
            ))}