如何在本机反应中获取数组对象内的嵌套数组对象

Question

Array [
  Object {
    "resultlist": Array [
      Object {
        "img": "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
        "name": "Mifa F1",
        "product_id": 87,
        "type": "product",
      },
      Object {
        "category_id": 20,
        "img": "https://www.achhacart.com/image/catalog/cmsblock/hgb5.png",
        "name": "Earphone",
        "type": "category",
      },
      Object {
        "img": "https://www.achhacart.com/image/catalog/cmsblock/air.gif",
        "name": "Air Purifier",
        "product_id": 87,
        "type": "product",
      },
      Object {
        "img": "https://www.achhacart.com/image/catalog/cmsblock/Powerbank10.jpg",
        "name": "Powerbank",
        "product_id": 87,
        "type": "product",
      },
    ],
    "sort_order": 0,
    "status": true,
    "type": "product",
  },
  Object {
    "img": "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
    "product_id": 187,
    "sort_order": 1,
    "status": true,
    "type": "middleimage",
  },
  Object {
    "resultlist": Array [
      Object {
        "img": "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
        "name": "Mifa A1 Black",
        "product_id": 87,
        "type": "product",
      },
      Object {
        "category_id": 20,
        "img": "https://www.act.com/image/catalog/cmsblock/hgb5.png",
        "name": "Earphones",
        "type": "category",
      },
      Object {
        "img": "https://www.act.com/image/catalog/cmsblock/air.gif",
        "name": "Air Purifiers",
        "product_id": 87,
        "type": "product",
      },
      Object {
        "img": "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
        "name": "Powerbanks",
        "product_id": 87,
        "type": "product",
      },
    ],
    "sort_order": 2,
    "status": true,
    "type": "product",
  },
  Object {
    "resultlist": Array [
      Object {
        "image": "https://www.act.com/simage/catalog/1AA/WeChatImage_20191228151402.jpg",
        "link": "",
        "title": "slider1",
      },
      Object {
        "image": "https://www.act.com/staging-achhamall.com/image/catalog/1accc/WeChatImage_20191231125513.jpg",
        "link": "",
        "title": "slider2",
      },
    ],
    "sort_order": 3,
    "status": true,
    "type": "slider",
  },
]

这是我的 json 响应，我想用数组对象获取我的所有响应对象，我尝试过：-

   {data.map((item, i) =>
        <View>
        <Text key={i}>{item.type}</Text>

        {
          item.resultlist.map((sub,index)=>
            <Text key={index}>sub.name</Text>

          )}
            </View>
    )}

使用项目然后在内部我使用带有索引的子
但随后错误显示 undefined is not an object (evaluating 'item.resultlist.map')

如何获取此嵌套数组对象或我的响应 json 有问题，请建议我在哪里出错？ 主要是当我尝试使用

获取数组对象中的单个对象时

let products = responseJson.response[0].resultlist[3];

然后使用控制台我只能获取单个对象，但是当使用此映射函数来获取时，它是未定义的

Answer 1

根据问题，您的 JSON 数组有 4 个对象，但其中只有 3 个具有名为 resultlist 的嵌套数组，而 1 个对象没有。

{
    "img": "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
    "product_id": 187,
    "sort_order": 1,
    "status": true,
    "type": "middleimage",
}

这会导致错误 undefined is not an object (evaluating 'item.resultlist.map')，因为您需要一个数组才能在 JS 中使用 map。但是那个对象没有resultlist。

这是您需要从后端处理的事情。如果不是，您可以通过添加resultlist:[] 来过滤该对象或更改该对象的结构，如下所示。

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
  state = {
    data: [
      {
        resultlist: [
          {
            img:
              "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
            name: "Mifa F1",
            product_id: 87,
            type: "product"
          },
          {
            category_id: 20,
            img: "https://www.achhacart.com/image/catalog/cmsblock/hgb5.png",
            name: "Earphone",
            type: "category"
          },
          {
            img: "https://www.achhacart.com/image/catalog/cmsblock/air.gif",
            name: "Air Purifier",
            product_id: 87,
            type: "product"
          },
          {
            img:
              "https://www.achhacart.com/image/catalog/cmsblock/Powerbank10.jpg",
            name: "Powerbank",
            product_id: 87,
            type: "product"
          }
        ],
        sort_order: 0,
        status: true,
        type: "product"
      },
      {
        img: "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
        product_id: 187,
        sort_order: 1,
        status: true,
        type: "middleimage"
      },
      {
        resultlist: [
          {
            img:
              "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
            name: "Mifa A1 Black",
            product_id: 87,
            type: "product"
          },
          {
            category_id: 20,
            img: "https://www.act.com/image/catalog/cmsblock/hgb5.png",
            name: "Earphones",
            type: "category"
          },
          {
            img: "https://www.act.com/image/catalog/cmsblock/air.gif",
            name: "Air Purifiers",
            product_id: 87,
            type: "product"
          },
          {
            img: "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
            name: "Powerbanks",
            product_id: 87,
            type: "product"
          }
        ],
        sort_order: 2,
        status: true,
        type: "product"
      },
      {
        resultlist: [
          {
            image:
              "https://www.act.com/simage/catalog/1AA/WeChatImage_20191228151402.jpg",
            link: "",
            title: "slider1"
          },
          {
            image:
              "https://www.act.com/staging-achhamall.com/image/catalog/1accc/WeChatImage_20191231125513.jpg",
            link: "",
            title: "slider2"
          }
        ],
        sort_order: 3,
        status: true,
        type: "slider"
      }
    ]
  };

  render() {
    let newArray = this.state.data.filter(obj => obj.resultlist);
    return (
      <View style={styles.container}>
        {newArray.map((item, i) => (
          <View>
            <Text key={i} style={{color: 'red'}}>{item.type}</Text>
            {item.resultlist.map((sub, index) => (
              <Text key={index}>{sub.name}</Text>
            ))}
          </View>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#ecf0f1",
    padding: 8
  }
});

希望这对您有所帮助。如有疑问，请随意

Answer 2

问题是您的响应数组始终没有相同的对象类型，例如 responseJson.response[1] 没有任何名为 resultlist 的键。

所以如果你想获取和存储所有的结果列表，有一种方法，

let arrayOfData = [];
  {data.map((item, i) =>{

    if('resultlist' in item){
      item['resultlist].map((eachObject) => {
        arrayOfData.push(eachObject);
      })
    }
  }

    )};

    Now do this after getting arrayOfData , plot as you want 

    arrayOfData.map((data) => (
      <Text>{data.name}</Text>
    ))

希望对您有所帮助。如有疑问，请随意

Answer 3

这就是你可以迭代的方式

render() {
    const {array} = this.state;
    return (
      <View style={styles.container}>
       {array[0].resultlist.map((item,index)=>
        <View key={index}>
        <Text>{item.name}</Text>
        </View>
       )}
      </View>
    );
  }

状态数据

  state={
    array:[{
    "resultlist": [
       {
        "img": "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
        "name": "Mifa F1",
        "product_id": 87,
        "type": "product",
      },
       {
        "category_id": 20,
        "img": "https://www.achhacart.com/image/catalog/cmsblock/hgb5.png",
        "name": "Earphone",
        "type": "category",
      },
       {
        "img": "https://www.achhacart.com/image/catalog/cmsblock/air.gif",
        "name": "Air Purifier",
        "product_id": 87,
        "type": "product",
      },
       {
        "img": "https://www.achhacart.com/image/catalog/cmsblock/Powerbank10.jpg",
        "name": "Powerbank",
        "product_id": 87,
        "type": "product",
      }
    ],
    "sort_order": 0,
    "status": true,
    "type": "product",
  },
   {
    "img": "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
    "product_id": 187,
    "sort_order": 1,
    "status": true,
    "type": "middleimage",
  },
   {
    "resultlist": [
       {
        "img": "https://www.act.com/image/cache/catalog/new%20thumbnails/Mifa%20A1BlacjkThumbnail-600x600.jpg",
        "name": "Mifa A1 Black",
        "product_id": 87,
        "type": "product",
      },
       {
        "category_id": 20,
        "img": "https://www.act.com/image/catalog/cmsblock/hgb5.png",
        "name": "Earphones",
        "type": "category",
      },
       {
        "img": "https://www.act.com/image/catalog/cmsblock/air.gif",
        "name": "Air Purifiers",
        "product_id": 87,
        "type": "product",
      },
       {
        "img": "https://www.act.com/image/catalog/cmsblock/Powerbank10.jpg",
        "name": "Powerbanks",
        "product_id": 87,
        "type": "product",
      },
    ],
    "sort_order": 2,
    "status": true,
    "type": "product",
  },
   {
    "resultlist": [
       {
        "image": "https://www.act.com/simage/catalog/1AA/WeChatImage_20191228151402.jpg",
        "link": "",
        "title": "slider1",
      },
       {
        "image": "https://www.act.com/staging-achhamall.com/image/catalog/1accc/WeChatImage_20191231125513.jpg",
        "link": "",
        "title": "slider2",
      },
    ],
    "sort_order": 3,
    "status": true,
    "type": "slider",
  },
]
  }