嵌套 Json 数据的平面列表

Question

我对 React Native 有点陌生，并且已经弄乱了 JSON 一段时间。我正在尝试实现一个平面列表，其中包含本地 json 文件中存在的用户名和位置详细信息。但是 Json 数据没有渲染到平面列表中。

这是我的 Json 文件数据：

{
    "ok": true,
    "members": [{
            "id": "W012A3CDE",
            "real_name": "Egon Spengler",
            "tz": "America/Los_Angeles",
            "activity_periods": [{
                    "start_time": "Feb 1 2020  1:33PM",
                    "end_time": "Feb 1 2020 1:54PM"
                },
                {
                    "start_time": "Mar 1 2020  11:11AM",
                    "end_time": "Mar 1 2020 2:00PM"
                },
                {
                    "start_time": "Mar 16 2020  5:33PM",
                    "end_time": "Mar 16 2020 8:02PM"
                }
            ]
        },
        {
            "id": "W07QCRPA4",
            "real_name": "Glinda Southgood",
            "tz": "Asia/Kolkata",
            "activity_periods": [{
                    "start_time": "Feb 1 2020  1:33PM",
                    "end_time": "Feb 1 2020 1:54PM"
                },
                {
                    "start_time": "Mar 1 2020  11:11AM",
                    "end_time": "Mar 1 2020 2:00PM"
                },
                {
                    "start_time": "Mar 16 2020  5:33PM",
                    "end_time": "Mar 16 2020 8:02PM"
                }
            ]
        }
    ]
}

我的显示平面列表的代码如下：

import React, { Component } from 'react'
import { Text, View, StyleSheet, TouchableOpacity, FlatList } from 'react-native';
import {Card} from 'react-native-paper'
import data from '../data/db.json';

export default class UsersScreen extends Component {

    render()
    {
        return(
            <View style={styles.container}>
                <Text style={styles.header}>User Data</Text>
                <FlatList
                    data={data}
                    renderItem={data.members.map(member => {
                        return (
                            <Card>
                                <View style={styles.datacontainer}>
                                    <Text style={styles.name}>{member.id} - {member.real_name}</Text>
                                    <Text style={styles.location}>{member.tz}</Text>
                                </View>
                            </Card>
                        )
                    })}
                    keyExtractor={member=> member.id}
                />
            </View>
        )
    }
}

请帮忙解决这个问题！

Answer 1

首先，在你的情况下，你应该传递 data.members 作为你的 flatlist data 属性，因为它是你想要映射的数组。

然后，renderItem 属性需要一个带有 ListRenderItemInfo<ItemT> 参数的函数。这个论点可以被解构以获得一个 item 属性，在你的情况下，它是一个成员。

如何设置您的 FlastList：

<FlatList
  data={data.members}
  renderItem={({item}) => (
    <Card>
      <View style={styles.datacontainer}>
        <Text style={styles.name}>{item.id} - {item.real_name}</Text>
        <Text style={styles.location}>{item.tz}</Text>
      </View>
    </Card>
  )}
  keyExtractor={member=> member.id}
/>

有关 renderItem 的更多信息，请点击此处：https://reactnative.dev/docs/flatlist#renderitem

Answer 2

很好地解决这个 im 映射以创建新的数组依赖于我需要的结果，

const newData = DATA.members.map((val) => ({
    id: val.id,
    realname: val.real_name,
    tz: val.tz
}));

之后为 renderItem 创建函数

const renderItem = ({ item }) => {
return (
  <>
   //You can customize your Component here, its good if reuseable
    <Text>
      {item.id} - {item.real_name}
    </Text>
    <Text>{item.tz}</Text>
  </>
 );
};

然后创建 keyExtractor，在这种情况下您使用 id 作为密钥

const keyExtractor = () => (item) => item.id;

最后将其嵌入 Flatlist

<FlatList
    data={newData}
    renderItem={renderItem}
    keyExtractor={keyExtractor}
  />

嵌套 Json 数据的平面列表

Flatlist for nested Json data

json

react-native

react-native-flatlist