react / api - 如何在api响应中解析和映射数组

Question

我正在尝试解析并映射此api响应中的数组“items”

[
  {
    "id": "",
    "portal_account_id": "",
    "platform": "",
    "current_date": "2018-07-30T11:27:16+02:00",
    "email": "",
    "items": [
      {
        "itemId": "123",
        "name": "vacuum 1",
        "img": ""
      },
      {
        "itemId": "456",
        "name": "vacuum 2",
        "img": ""
      },
      {
        "itemId": "789",
        "name": "vacuum 3",
        "img": ""
      }
    ]
  }
]

这是我试过的，它只是解析响应本身，但我想解析这个响应中的数组。

this.props.items.map((item) => {
                return (
                    <Col className='' xs={12} md={4} key={item.id}>
                        <ProductItem handleOnAdd={this.dispachAddToCart.bind(this)} item={item} />
                    </Col>
                );
            })

Answer 1

假设这是你的数组;

const response = [
  {
    "id": "",
    "portal_account_id": "",
    "platform": "",
    "current_date": "2018-07-30T11:27:16+02:00",
    "email": "",
    "items": [
      {
        "itemId": "123",
        "name": "vacuum 1",
        "img": ""
      },
      {
        "itemId": "456",
        "name": "vacuum 2",
        "img": ""
      },
      {
        "itemId": "789",
        "name": "vacuum 3",
        "img": ""
      }
    ]
  },
  {
    "id": "",
    "portal_account_id": "",
    "platform": "",
    "current_date": "2018-07-30T11:27:16+02:00",
    "email": "",
    "items": [
      {
        "itemId": "123",
        "name": "vacuum 1",
        "img": ""
      },
      {
        "itemId": "456",
        "name": "vacuum 2",
        "img": ""
      },
      {
        "itemId": "789",
        "name": "vacuum 3",
        "img": ""
      }
    ]
  }
];

然后在render方法做到这一点。

render() {
   return (
      {response.map(item => {
          return (
             <div key={item.id}>
                {item.items.map(product => {
                    return (
                       <div key={product.itemId}>
                          <p>{product.name}</p>
                          <p>path of image{product.img}</p>
                       </div>
                    );
                })}
             </div>
          )
      })}
   );
}

问题是你获得了一个对象数组，并且每个对象内部都有另一个对象数组。

Answer 2

您可能正在从API获取JSON res。你可以从中破坏items，然后迭代它。

render(){
const { items } = this.props.response

 items.map((item)=>{
    return (
      // do the stuff here
    )
   })

}

Answer 3

你的意思是你只想解析响应数组的第一项：

this.props.items[0].items.map