嵌套 Json 数据的平面列表

Question

我对原生反应有点陌生，并且在一段时间内一直在搞乱 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 作为您的平面列表 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}
  />