javascript - 如何在 React Native ListView 中过滤和呈现重复出现的嵌套 JSON 数据？

Question

我是 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;
};

---

非常感谢您的帮助!

Answer 1

这很简单。您的代码期望始终有一个 content 属性，它是一个数组(或者一个具有 .map() 方法的对象)。

在最内层，没有"content": [] 属性。

在尝试使用 content 属性之前，要么添加一个，要么只添加一个 checkin 。

我最喜欢的技术是使用 (item.content || []).map(...，如果属性为 null 或未定义，则使用空数组。