React Native Flatlist - 如何遍历嵌套对象

Question

我有一个 JSON 从文件 ./jsonData.json 返回的对象。

在这个文件中，我有这个数据：

注意：这是从文件加载的全部 JSON 数据。

import QuizData from './quizData.json'

这是一个新应用，所以 QuizData 是以下所有内容：

[
    {
        "id": 1,
        "name": "Lesson 1",
        "topics": [
            {
                "topicID": 1,
                "topicName": "Science",
                "topicDescription": "Science quiz questions"
            },
            {
                "topicID": 2,
                "topicName": "General Knowledge",
                "topicDescription": "General Knowledge Quiz Questions"
            }
        ]
    }
]

我正在尝试为找到的每个主题获取主题名称并将其作为文本发布。

这是我的代码：

<FlatList
    data={QuizData}
    renderItem={({ item, index }) =>
        <View>
            <Text>{item.topics.topicName}</Text>
        </View>
    }
    keyExtractor={(item) => item.topicID.toString()}
/>

我也试过：

{item.topics.[index].topicName}

和

{item.topics[index][topicName]}

但是我得到错误：

undefined is not an object.

然后我想也许它需要：

data={QuizData.topics}

然后将 renderItem 更改为：

{item.topicName}

这次没有错误，但也没有向屏幕输出文本。

Answer 1

您需要有两张地图：

YOUR_OBJECT.map(item => Object.keys(item.topics).map(index => (
   return console.log(item.topics[index].topicName)
   )
));

Answer 2

你可以这样做

import * as React from 'react';
import { Text, View, FlatList } from 'react-native';

import data from './data.json';

export default function App() {
  return (
    <FlatList
      data={data}
      renderItem={({ item, index }) => (
        <View>
          {item.topics.map((v, i) => (
            <>
              <Text>{v.topicName}</Text>
              <Text>{v.topicDescription}</Text>
            </>
          ))}
        </View>
      )}
    />
  );
}

其中 data.json 是根目录中包含您的数据的 json 文件。

React Native Flatlist - 如何遍历嵌套对象

React Native Flatlist - How to loop through nested object

javascript

react-native

react-native-flatlist

nested-object