如何在 React Native 中过滤复杂数组中的嵌套对象答案

【问题标题】：How can I filter nested object in a complex array in React Native如何在 React Native 中过滤复杂数组中的嵌套对象
【发布时间】：2022-01-05 03:16:45
【问题描述】：

处理响应数据后，我在 React-Native 中得到了一个如下所示的数组

[{
  "children": [],
  "data": {
    "catCd": "C000000146",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "Game Design",
    "parentCatCd": "C000000143",
    "parentCatCdPath": "C000000143.C000000146",
    "usedFlag": true
  },
  "hasChildren": false,
  "id": "C000000146",
  "key": "C000000146",
  "sortOrder": 3
}, {
  "children": ["C000000144", "C000000145", "C000000146"],
  "data": {
    "catCd": "C000000143",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "Design",
    "parentCatCd": null,
    "parentCatCdPath": "C000000143",
    "usedFlag": true
  },
  "hasChildren": true,
  "id": "C000000143",
  "key": "C000000143",
  "sortOrder": 1
}, {
  "children": ["C000000166"],
  "data": {
    "catCd": "C000000144",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "3D & Animation",
    "parentCatCd": "C000000143",
    "parentCatCdPath": "C000000143.C000000144",
    "usedFlag": true
  },
  "hasChildren": true,
  "id": "C000000144",
  "key": "C000000144",
  "sortOrder": 1
}, {
  "children": [],
  "data": {
    "catCd": "C000000166",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "Depth1",
    "parentCatCd": "C000000144",
    "parentCatCdPath": "C000000143.C000000144.C000000166",
    "usedFlag": true
  },
  "hasChildren": false,
  "id": "C000000166",
  "key": "C000000166",
  "sortOrder": 1
}, {
  "children": [],
  "data": {
    "catCd": "C000000145",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "Design Tools",
    "parentCatCd": "C000000143",
    "parentCatCdPath": "C000000143.C000000145",
    "usedFlag": true
  },
  "hasChildren": false,
  "id": "C000000145",
  "key": "C000000145",
  "sortOrder": 2
}, {
  "children": [],
  "data": {
    "catCd": "C000000167",
    "catGrpCd": "CG00000135",
    "catNames": [Array],
    "catNm": "Design 01",
    "parentCatCd": null,
    "parentCatCdPath": "C000000167",
    "usedFlag": true
  },
  "hasChildren": false,
  "id": "C000000167",
  "key": "C000000167",
  "sortOrder": 1
}, {
  "children": ["C000000143", "C000000167"],
  "data": null,
  "hasChildren": true,
  "id": "C000000095",
  "key": "C000000095",
  "sortOrder": 0
}]

最后我想过滤并获取所有具有 parentCatCD 的元素：null。因为我是新来的反应并且尝试了很多但没有任何效果。 (map, filter, some, etc ...)，当我尝试过滤它们时，我总是得到 undefined is not an object 错误。

我该如何解决这个问题？

我的代码：

  function filterData(arr: any) {
    let newArray = arr.filter(function(item:any){
      return item.data['parentCatCd'] == null;
   }).map(function({data} : {data:any}){
       return {data};
   });
  }

错误：null 不是对象（评估 'item.data['parentCatCd']）

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

好的，你可以试试这个。

let filteredData = response.filter(e => e.data && e.data.parentCatCd === null);

这将返回 parentCatCd 为空的数据。

【讨论】：

成功了！谢谢，但你能告诉我有什么问题吗？为什么会这样？
在检查 parentCatCd 是否为 null 之前，您需要确保数据对象不为 null ，这就是它的 e.data && e.data.pretCatCd 的原因。您直接检查 parentCatCd，而不检查数据是否为空。因此，您得到的 null is not an object 错误。

【解决方案2】：

根据您的数组结构，在读取parentCatCd 之前，您需要检查item.data 是否为null，因为您数组中的某些项目具有data 属性和null 值，如下所示：

let data= [{ "children": [], "data": { "catCd": "C000000146", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "Game Design", "parentCatCd": "C000000143", "parentCatCdPath": "C000000143.C000000146", "usedFlag": true }, "hasChildren": false, "id": "C000000146", "key": "C000000146", "sortOrder": 3 }, { "children": ["C000000144", "C000000145", "C000000146"], "data": { "catCd": "C000000143", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "Design", "parentCatCd": null, "parentCatCdPath": "C000000143", "usedFlag": true }, "hasChildren": true, "id": "C000000143", "key": "C000000143", "sortOrder": 1 }, { "children": ["C000000166"], "data": { "catCd": "C000000144", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "3D & Animation", "parentCatCd": "C000000143", "parentCatCdPath": "C000000143.C000000144", "usedFlag": true }, "hasChildren": true, "id": "C000000144", "key": "C000000144", "sortOrder": 1 }, { "children": [], "data": { "catCd": "C000000166", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "Depth1", "parentCatCd": "C000000144", "parentCatCdPath": "C000000143.C000000144.C000000166", "usedFlag": true }, "hasChildren": false, "id": "C000000166", "key": "C000000166", "sortOrder": 1 }, { "children": [], "data": { "catCd": "C000000145", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "Design Tools", "parentCatCd": "C000000143", "parentCatCdPath": "C000000143.C000000145", "usedFlag": true }, "hasChildren": false, "id": "C000000145", "key": "C000000145", "sortOrder": 2 }, { "children": [], "data": { "catCd": "C000000167", "catGrpCd": "CG00000135", "catNames": [Array], "catNm": "Design 01", "parentCatCd": null, "parentCatCdPath": "C000000167", "usedFlag": true }, "hasChildren": false, "id": "C000000167", "key": "C000000167", "sortOrder": 1 }, { "children": ["C000000143", "C000000167"], "data": null, "hasChildren": true, "id": "C000000095", "key": "C000000095", "sortOrder": 0 }]

let result = data.filter(item => item.data && item.data.parentCatCd == null).map(({data})=> data)
console.log(result)

【讨论】：

【解决方案3】：

假设您的数据在变量响应中。您的数组的问题是您的最后一个 data 字段为 null。所以正常的filter方法检查会报错。你可以试试下面的方法。

let newResponse = response.filter((res) => res.data && res.data.parentCatCd === null).map(({data}) => data);

【讨论】：