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

Question

我是 JSON 和过滤的新手。 下面的data.json文件和FolderScreen.js在React react native ListView中呈现以下章节结构。 使用react-navigation props 向下传递以呈现ListView的相关嵌套子章节。

这对于Chapter 1完美无缺，并在ListView呈现它的Subchapter A 、 B和C ......

级别 1 >第 1 章

分章A

B分章

C分章

…但是一旦Subchapter A传递给FolderScreen.js，它的所有Sub-Subchapters A1 、 A2和A3就不会在ListView按预期呈现，下面的代码片段......

级别 2 > 分章 A

子章节 A1

子章节 A2

子章节 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" } ] }

---

FolderScreen.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属性添加一个签入。

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

Answer 2

您的最后一张地图返回一个只有一个条目的数组。 您需要访问第一个数组项 [0] 或修改您的代码以遍历结果。

这是有效的简化版本：

const listEntry = jsonData.content
  .filter(sub => sub.id === entry)
  .map(subsub => subsub.content)[0]
  .map(item => { 
      return <ListEntry id={item.id} name={item.name}/> 
  }
);

因此，在使用最后一个 .map 之前，您应该更改代码以访问第一个数组成员：

const listEntry = jsonData.map(all =>
  all.content.filter(parent => parent.id === entry).map(item =>
    item.content)[0].map(i => {
        return (
            <ListEntry
                id={i.id}
                name={i.name}
                type={i.type}
                navigation={this.props.navigation}
                key={i.id}
            />
        );
    })
)
);

这是我的示例代码的工作小吃： https : //snack.expo.io/@navardan/nested-contents

这里还有一篇关于 .map 和 .filter 的好文章简化你的 JavaScript – 使用 .map()、.reduce() 和 .filter()