Question

我是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是一个包含records对象的数组：responseJson.records 那么，如何显示数据以及keyExtractor的用途是什么？

根据目前为止我搜索的内容，我们需要对数组使用map函数，但不太确定如何在此处使用

编辑：我已经修改了代码并使用了地图功能，现在得到的输出是：

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）。

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

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

上面的代码段将在字段中显示数据。

在react native中将嵌套数组显示到平面列表中

2 个答案: