无法使用 Ebay 显示价格数据在 React 中查找高级 API

Question

我正在使用 Finding Advanced API 成功地从 eBay 查询数据。我正在映射要在页面上显示的项目。我可以显示查询项目的标题和图像。但是，当我尝试降低嵌套在数组中的价格时，我遇到了麻烦。

数据如下：

   {
itemId: [
"120901386991"
],
title: [
"1952 Topps Mickey Mantle Chase Card Box 18 packs 5 1950s or 1960's cards per box"
],
globalId: [
"EBAY-US"
],
subtitle: [
"3 BX LOT. 1 VINTAGE PK PER 25 BOXES* LOOK 4 1952 MANTLE"
],
primaryCategory: [
{
categoryId: [
"213"
],
categoryName: [
"Baseball Cards"
]
}
],
secondaryCategory: [
{
categoryId: [
"156521"
],
categoryName: [
"Vintage Non-Sport Cards"
]
}
],
galleryURL: [
"https://thumbs4.ebaystatic.com/m/m1mtMB65mAApWQ2EhJy4qWA/140.jpg"
],
viewItemURL: [
"https://rover.ebay.com/rover/1/711-53200-19255-0/1?ff3=2&toolid=10044&campid=5338164673&customid=watchbask&lgeo=1&vectorid=229466&item=120901386991"
],
paymentMethod: [
"PayPal"
],
autoPay: [
"true"
],
location: [
"USA"
],
country: [
"US"
],
shippingInfo: [
{
shippingServiceCost: [
{
@currencyId: "USD",
__value__: "0.0"
}
],
shippingType: [
"Free"
],
shipToLocations: [
"Worldwide"
],
expeditedShipping: [
"false"
],
oneDayShippingAvailable: [
"false"
],
handlingTime: [
"1"
]
}
],
sellingStatus: [
{
currentPrice: [
{
@currencyId: "USD",
__value__: "118.0"
}
],
convertedCurrentPrice: [
{
@currencyId: "USD",
__value__: "118.0"
}
],
sellingState: [
"Active"
],
timeLeft: [
"P13DT19H16M11S"
]
}
],
listingInfo: [
{
bestOfferEnabled: [
"false"
],
buyItNowAvailable: [
"false"
],
startTime: [
"2012-04-23T16:52:17.000Z"
],
endTime: [
"2019-10-23T16:52:17.000Z"
],
listingType: [
"FixedPrice"
],
gift: [
"false"
],
watchCount: [
"444"
]
}
],
returnsAccepted: [
"false"
],
condition: [
{
conditionId: [
"1000"
],
conditionDisplayName: [
"Brand New"
]
}
],
isMultiVariationListing: [
"false"
],
pictureURLLarge: [
"https://i.ebayimg.com/00/s/NTAwWDMxNA==/z/sT8AAOSw62VZv9qQ/$_1.JPG"
],
topRatedListing: [
"false"
]
},

我使用“卡片”表示法传递道具，即 ebay 项目。我也可以在谷歌开发工具中看到道具。

因此，虽然我可以成功显示标题，但在反应中使用 {card.title}

当我使用 {card.sellingStatus.convertedCurrentPrice} 时，我收到此错误：

TypeError：无法读取未定义的属性“convertedCurrentPrice”

我尝试了一些其他变体，但似乎没有任何效果。

注意这里是我试图显示的“卡片”组件（此代码显示了我用于价格的另一种选择。

  const Card = props => {
  const { card } = props;
  return (
    <div className="col-md-3">
      <div className="card">
        <div className="card-block">
          {/* <h5 className="card-title">{card.title}</h5> */}
          <div className="mx-auto" style={{ width: 200 }}>
            <img
              src={card.pictureURLLarge}
              style={{
                width: 190,
                height: 200
              }}
              className="img-responsive"
              alt="..."
            />
          </div>
          <div className="card-body">
            <h2>{card.sellingStatus.convertedCurrentPrice["__value__"]}</h2>
          </div>
        </div>
      </div>
    </div>

还要注意，这是我的地图功能

 {card_list.map(item => (
                      <Card key={item.id} card={item} />

我在这里错过了什么吗？

Answer 1

如您所见， sellStatus 是一个数组。所以你必须像这样映射或获取值。

card.sellingStatus['convertedCurrentPrice]["__value__"]

或

card.sellingStatus[0].currentPrice[0]["__value__"];

因为你不需要多个<h2>

card.sellingStatus && card.sellingStatus[0].currentPrice[0]["__value__"];

这样它就不会在 promise 解决时抛出错误。