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

Question

处理完响应数据后，我在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。这不是一个对象错误。

我该如何解决这个问题？

我的代码：

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'](

Answer 1

好的，你可以试试这个。

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

这将返回parentCatCd为空的数据。

Answer 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)

Answer 3

假设您的数据位于变量响应中。数组的问题是您的最后一个数据字段为null。因此，正常的过滤器方法检查将得到一个错误。你可以试试贝娄这样的东西。

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