data.json

Question

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

这对于Chapter 1来说是完美的，并且在Subchapter A中将其渲染为B，C和ListView…

1级> 第1章


第A章

B章

C章

…，但是一旦Subchapter A向下传递到 FolderScreen.js ，其所有Sub-Subchapters A1，A2和A3都不会呈现与ListView中的预期内容相同，如下所示……

2级> A章


子章节A1

子子A2

子章节A3

…我是否在JSON过滤器中缺少某些内容？

还是做错了？

data.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(...，如果属性为null或未定义，则使用空数组。

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 Simplify your JavaScript – Use .map(), .reduce(), and .filter()

，这也是一篇不错的文章

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

data.json

FolderScreen.js

非常感谢您的帮助！

2 个答案: