我是 JSON 和过滤的新手。下面的 data.json 文件和 FolderScreen.js 在 react native
ListView
中呈现以下章节结构。使用 react-navigation
props 向下传递以在 ListView
中呈现相关的嵌套子章节。
这对 Chapter 1
完美无缺,并在 中呈现
…Subchapter A
、B
和 C
> ListView
Level 1 > Chapter 1
Subchapter A
Subchapter B
Subchapter C
... 但是一旦 Sub-Subchapters A
被传递到 FolderScreen.js 其所有 Sub-Subchapters A1
、A2
和 A3
在 ListView
中未按预期呈现,下面的代码片段......
Level 2 > Subchapter A
Sub-Subchapter A1
Sub-Subchapter A2
Sub-Subchapter A3
……我在 JSON 过滤器中遗漏了什么吗?
还是只是做错了?
数据.json
{
"id":"chapter-1",
"name":"Chapter 1",
"type":"folder",
"content":[
{
"id":"sub-chapter-a",
"name":"Subchapter A",
"type":"folder",
"content":[
{
"id":"sub-sub-chapter-a1",
"name":"Sub-Subchapter A1",
"type":"file"
},
{
"id":"sub-sub-chapter-a2",
"name":"Sub-Subchapter A2",
"type":"file"
},
{
"id":"sub-sub-chapter-a3",
"name":"Sub-Subchapter A3",
"type":"file"
}
]
},
{
"id":"sub-chapter-b",
"name":"Subchapter B",
"type":"file"
},
{
"id":"sub-chapter-c",
"name":"Subchapter C",
"type":"file"
}
]
}
文件夹屏幕.js
renderRow = () => {
const entry = this.props.navigation.getParam('chapterID', '');
const listEntry = jsonData.map(all =>
all.content.filter(parent => parent.id === entry).map(item =>
item.content.map(i => {
return (
<ListEntry
id={i.id}
name={i.name}
type={i.type}
navigation={this.props.navigation}
key={i.id}
/>
);
})
)
);
return listEntry;
};
非常感谢您的帮助!
最佳答案
这很简单。您的代码期望始终有一个 content
属性,它是一个数组(或者一个具有 .map()
方法的对象)。
在最内层,没有"content": []
属性。
在尝试使用 content
属性之前,要么添加一个,要么只添加一个 checkin 。
我最喜欢的技术是使用 (item.content || []).map(...
,如果属性为 null 或未定义,则使用空数组。
关于javascript - 如何在 React Native ListView 中过滤和呈现重复出现的嵌套 JSON 数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54030013/