Question

我无法访问React组件中的价格。我尝试使用能够访问图像和 id 之类的地图，但是尝试访问价格中的值时，它不起作用。我收到以下错误

地图不是{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.map((user, index) => {
      return (<div>
       {Object.keys(user.price).map(i=><p>user.price[i]</p>}
      </div>);
    }}

Answer 2

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。

如何在React中访问嵌套对象

2 个答案: