如何在反应中访问嵌套对象

Question

我无法访问反应组件中的价格。 我尝试使用能够访问图像和id等对象的地图，但是当尝试访问价格时它不起作用。 我收到以下错误

Map 不是{groups.map((user, index) => (user.price.map(i=><p>i.regular</p>)

JSON

[
  {
    "id": "shop/new/all-new",
    "name": "All New",
    "categoryType": "subcat",
    "groups": [
      {
        "id": "modern-leaning-narrow-bathroom-shelf-h5074",
        "name": "Modern Leaning Narrow Bathroom Shelf",
        "links": {
          "www": "https://www.westelm.com/products/modern-leaning-narrow-bathroom-shelf-h5074/"
        },
        "price": { "regular": 149, "selling": 111.75, "type": "special" },
        "thumbnail": {
          "size": "m",
          "meta": "",
          "alt": "",
          "rel": "thumbnail",
          "width": 363,
          "href": "https://www.westelm.com/weimgs/ab/images/wcm/products/201952/0001/modern-leaning-narrow-bathroom-shelf-m.jpg",
          "height": 363
        },
        "hero": {

        },
        "images": [
          {  },
          {

          },
          {
                      }
        ],
        "swatches": [],
        "messages": [],
        "flags": [
       ],
        "reviews": {
         }
      },
      [..more objects]

Answer 1

groups.user.price是一个对象，而不是一个数组，所以map不是它的函数。 相反，您可能想要做类似的事情

 const thing = { "id": "shop/new/all-new", "name": "All New", "categoryType": "subcat", "groups": [{ "id": "modern-leaning-narrow-bathroom-shelf-h5074", "name": "Modern Leaning Narrow Bathroom Shelf", "links": { "www": "https://www.westelm.com/products/modern-leaning-narrow-bathroom-shelf-h5074/" }, "price": { "regular": 149, "selling": 111.75, "type": "special" }, }]}; thing.groups.map(group => Object.keys(group.price).map(priceOpt => console.log(priceOpt, group.price[priceOpt])));

Object.keys()将接受一个对象并为您提供所有键的数组，然后您可以调用map 。

Answer 2

您不能在对象上使用地图。

尝试这个

   {groups.map((user, index) => {
      return (<div>
       {Object.keys(user.price).map(i=><p>user.price[i]</p>}
      </div>);
    }}