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

解决这个即时贴图以创建新的Array依赖结果是我需要的，

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数据的平面列表

2 个答案: