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

Question

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

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

                    }]
              }

    ]

}

因此，在记录内部，我有一个对象数组 "groups"，在 "groups" 内部，我有一个对象数组 "fields"，在字段内部，我有要显示的数据在 FlatList 里面。到目前为止，我能够显示 "name" ，它位于 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
   .
   .
   .

Answer 1

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

例如：

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

keyExtractor 为您的渲染项目分配一个唯一的键值。在您的例子中，它为 Flatlist 中的每个项目分配了一个 name 值（来自您的 this.props.people）。

如您所知，所有 React 子项都需要一个唯一的密钥，否则您将收到此警告

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

Answer 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>
        );

上面的代码片段将显示字段内的数据。

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

Display nested array into a Flat list in react native

react-native

redux

react-native-flatlist