带有laravel rest api的react-native flatlist中的groupby

如何解决带有laravel rest api的react-native flatlist中的groupby

我在后端使用 laravel 并在前端使用本机反应，因此我在 laravel 中创建查询，输出类似

data:[
 {
   'gender':male,'name': ...
   'city':...
   ....
 },....
] 

所以在 React Native 中，我使用 fetch 方法从后端获取数据。

 .then((responseJson) => {
 const dataSource = responseJson.data.reduce(function(sections,item) {

            let section = sections.find(section => section.gender=== item.gender);
     
            if(!section) {
               section = { gender: item.gender,data:[] };
               sections.push(section);
            }
     
            section.data.push(item);
     
            return sections;
     
         },[]);
     
         this.setState({
           dataSource: dataSource
         });
}

我使用这样的平面列表

<FlatList
  data={this.state.dataSource}
  keyExtractor={(item,index) => index + ""}
  ListHeaderComponent={this.tableHeader}
  renderSectionHeader={ 
    ({ section : { gender}}) => (<Text>{ gender}</Text>) 
  }        
  stickyHeaderIndices={[0]}
  renderItem={ 
    ({item}) => (
      <Text>{item.name},{item.gender}</Text>
    )
  }
/>

但是当我控制台日志datasource时它只显示我的性别而不显示名称 它返回这样的数据

[
   {"gender": "male","data": [[Object]]},{"gender": "female","data": [[Object]]} 
]

基本上我想要这样的数据

...table header
male
1      raja     malysia
2      alex     england
3      henry    america
...