在本机反应中将嵌套数组显示到平面列表中答案

【问题标题】：Display nested array into a Flat list in react native在本机反应中将嵌套数组显示到平面列表中
【发布时间】：2020-06-04 12:54:21
【问题描述】：

我是 RN 的新手，最近开始使用 redux。我有一个以下格式的 api 响应：

    {
    records : [
              {
               name : "cde"
               groups :[
                      {
                       id : "212"
                       fields[{
                              data : "abc"
                              }]

                    }]
              }

    ]

}

因此，在记录内部，我有一个对象数组“组”，在“组”内部，我有对象数组“字段”，在字段内部，我有要在 FlatList 中显示的数据。到目前为止，我能够显示 FlatList 内记录中的“名称”。我的文件 PeopleList.js 如下所示：

export default class PeopleList extends Component {
  _keyExtractor = item => name;

  _renderItem = ({ item }) => {




       const { name} = item;
    const groups =  this.props.people.map((items, index)=>{
   return( <Text>{name}({items.id})</Text>)
    })



      //const {} = item.groups;


        return (
          <View>
            <View style={styles.cardContainerStyle}>
              <View style={{ paddingRight: 5 }}>

                <Text style={styles.cardTextStyle}>

               {/* {name} {"\n"} */}
                {groups}

                </Text>

              </View>
              <Image
                style={styles.faceImageStyle}
              //  source={{ uri: picture.medium }}
              />
            </View>
          </View>
        );
      };


          render() {
            return (
              <FlatList
                style={{ flex: 1 }}
                data={this.props.people}
                keyExtractor={this._keyExtractor}
                renderItem={this._renderItem}
                showsVerticalScrollIndicator={false}
                showsHorizontalScrollIndicator={false}
              />
            );
          }
        }

    PeopleList.propTypes = {
      people: PropTypes.array
    };

people 是一个包含记录对象的数组：responseJson.records 那么，如何显示数据以及 keyextractor 的用途是什么？

根据我目前搜索的内容，我们需要对数组使用 map 函数，但不太清楚如何在这里使用它

编辑：我已经修改了我的代码并使用了 map func，现在我得到的输出是：

name1 groupid1 groupid2 ... so on
name2 groupid1 groupid2 ... so on
.
.
. and so on

随心所欲：

   name1 groupid1
   name2 groupid2
   .
   .
   .

【问题讨论】：

标签： react-native redux react-native-flatlist

【解决方案1】：

您可以使用解构赋值来显示数据，就像您在代码中使用的那样。

例如：

const { name, groups } = item;
const { fields } = item.groups;

keyExtractor 为您的渲染项分配一个唯一的键值。在您的情况下，它为您的平面列表中的每个项目分配一个name 值（来自您的this.props.people）。

如您所知，所有反应儿童都需要一个唯一的密钥，否则您将收到此警告

Warning: Each child in a list should have a unique "key" prop

【讨论】：

那我怎么显示呢？我厌倦了这个并使用fields.data显示，它不起作用。
你的字段是一个数组，使用 fields[0].data

【解决方案2】：

以下代码需要添加

   if(item.groups){
       groupList =  item.groups.map((unit, key)=>{
        return (<View key="key">
    <Text>{unit.id}</Text>
    { unit.fields.map((unit1, key1)=>{
       return <Text key={key1}>{unit1.name}</Text>
    })
      }

稍后我们需要显示 groupList

return (
          <View>
            <View style={styles.cardContainerStyle}>
              <View style={{ paddingRight: 5 }}>

                <Text style={styles.cardTextStyle}>

               {/* {name} {"\n"} */}
                {groupList}

                </Text>

              </View>
              <Image
                style={styles.faceImageStyle}
              //  source={{ uri: picture.medium }}
              />
            </View>
          </View>
        );

上面的 sn -p 会在字段中显示数据。

【讨论】：