无法使用 Ebay Finding Advanced API 在 React 中显示价格数据

Can't Display Price Data Using Ebay Finding Advanced API In React

我正在使用 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"
]
},

我已经使用 'card' 表示法传递了道具,这是易趣商品。我也可以在 google 开发工具中看到道具。

因此虽然我可以成功显示标题,但在 react

中使用 {card.title}

当我去使用 {card.sellingStatus.convertedCurrentPrice} 时,我得到这个错误:

TypeError: 无法读取未定义的 属性 'convertedCurrentPrice'

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

请注意,这是我要显示的 'Card' 组件(此代码显示了我用于价格的另一种选择。

  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} />

我是不是漏了什么?

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

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

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

因为您不需要多个 <h2>

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

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