在React Native中获取并分组FlatList的JSON数据

。我使用fetch和Flatlist获取和显示json数据。我的代码工作正常，但我想按“性别”将json分开，如下所示。我研究了groupby和reduce函数，但没有找到解决方案

"gender": "male" {
    {name,location...},
    {name,location...},
    {name,location...}
},
"gender": "female" {
    {name,location...},
    {name,location...},
    {name,location...}
}

RN码

export default class Test extends React.Component {
  constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }

  componentDidMount(){
    return fetch('https://randomuser.me/api/?results=5')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson.results,
        }, function(){
        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

  render() {

    if(this.state.isLoading){
      return(
        <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
      )
    }

    return(
      <View style={{flex: 1, paddingTop:20}}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => 
            <View><Text>{item.name.first},{item.gender}</Text></View>
          }
          keyExtractor={({id}, index) => id}
        />
      </View>
    );
  }
}

导出默认类测试扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={isLoading:true}
}
componentDidMount（）{
返回获取（'https://randomuser.me/api/?results=5')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
数据来源：responseJson.results，
}，函数（）{
});
})
.catch（（错误）=>{
控制台错误（error）；
});
}
render（）{
if（此.state.isLoading）{
返回(
)
}
返回(
{item.name.first}，{item.gender}
}
keyExtractor={（{id}，索引）=>id}
/>
);
}
}

如果我正确理解了您的问题，您希望按性别对数据进行分组，并在类似列表的组件中显示分组。在这种情况下，如果您在

数据源

中引入额外的结构，则可能更适合这种情况

要使用

，请首先修改

render（）

函数，如下所示：

return (<View style={{flex: 1, paddingTop:20}}>
    <SectionList
      data={ this.state.dataSource }
      renderSectionHeader={ 
          ({ section : { gender }}) => (<Text>{ gender }</Text>) 
      }
      renderItem={ 
          ({item}) => (<Text>{item.name.first},{item.gender}</Text>) 
      }
      keyExtractor={(item, index) => item.login.uuid + index}
    />
  </View>);

最后，您需要更新组件构造函数中的初始状态，以确保

render（）

可以在

fetch（）

请求繁忙时完成，方法是添加以下内容：

constructor(props){
    super(props);
    this.state ={ 
        isLoading: true,
        dataSource: [] // Add this
    }
}

下面是一个工作代码片段，展示如何处理JSON数据，并按性别键将其分组-希望这有帮助

var responseJson={
“结果”：[
{
“性别”：“女性”，
“名称”：{}，
“地点”：{}，
“电子邮件”：“卡拉。ferreira@example.com",
“登录”：{
“uuid”：“86f5b29b-1f36-4082-8b88-18df6c5985f9”，
“用户名”：“orangebutterfly557”，
“密码”：“kojak”，
“盐”：“7mybIlaS”，
“md5”：“c85980c5ce76b38b71d162402d71eb1c”，
“sha1”：“E38B87AAF2D5BE040ED0741FAA0E4B97D52FD35”，
“sha256”：“9F44B3DA697A63B4D5C35313AB651E8FE0315D1EE199D5BD0397279189C881”
},
“dob”：{
“日期”：“1990-07-01T17:43:24Z”，
“年龄”：28岁
},
“注册”：{
“日期”：“2018-05-17T15:57:05Z”，
“年龄”：0
},
“电话”：（73）6539-5154，
“单元”：（52）4127-1768，
“id”：{
“名称”：“，
“值”：空
},
“图片”：{
“大”：https://randomuser.me/api/portraits/women/41.jpg",
“中等”：https://randomuser.me/api/portraits/med/women/41.jpg",
“缩略图”：https://randomuser.me/api/portraits/thumb/women/41.jpg"
},
“nat”：“BR”
},
{
“性别”：“女性”，
“姓名”：{
“标题”：“ms”，
“第一”：“伊莎贝尔”，
“最后”：“卡巴莱罗”
},
“地点”：{
“街道”：“7168号布拉沃·穆里略街”，
“城市”：“瓦拉多利德”，
“州”：“加那利群岛”，
“邮政编码”：79290，
“坐标”：{
“纬度”：“-69.7045”，
“经度”：“4.0689”
},
“时区”：{
“偏移量”：“-9:00”，
“描述”：“阿拉斯加”
}
},
“电子邮件”：“伊莎贝尔。caballero@example.com",
“登录”：{
“uuid”：“794613c2-cac6-4c71-a2b6-f2ce119b46d2”，
“用户名”：“beautifulbutterfly648”，
“密码”：“啤酒”，
“盐”：“5fhMSsyZ”，
“md5”：“ee62bb75d8f0a95d1d0788fff592e6dc”，
“sha1”：“71aa4f04cba4a601a52e358b1986a627edecab5a”，
“sha256”：“B5C3C0B607F154F0FAA8D7F68FC0FA981B9B3283FC9F37CF0ECF2A0F608C8D”
},
“dob”：{
“日期”：“1951-03-16T06:28:07Z”，
“年龄”：67
},
“注册”：{
“日期”：“2008-08-12T17:02:44Z”，
“年龄”：10岁
},
“电话”：“938-596-606”，
“小区”：“604-802-919”，
“id”：{
“名称”：“DNI”，
“值”：“08944217-Q”
},
“图片”：{
“大”：https://randomuser.me/api/portraits/women/18.jpg",
“中等”：https://randomuser.me/api/portraits/med/women/18.jpg",
“缩略图”：https://randomuser.me/api/portraits/thumb/women/18.jpg"
},
“nat”：“ES”
},
{
“性别”：“男性”，
“姓名”：{
“头衔”：“先生”，
“第一”：“欧文”，
“last”：“ouellet”
},
“地点”：{
“街道”：“弗雷德里克大街8868号”，
“城市”：“滑铁卢”，
“州”：“纽芬兰和拉布拉多”，
“邮政编码”：“J9T 1I9”，
“坐标”：{
“纬度”：“-74.7042”，
“经度”：“-147.1181”
},
“时区”：{
“偏移量”：“-3:30”，
“说明”：“纽芬兰”
}
},
“电子邮件”：“欧文。ouellet@example.com",
“登录”：{
“uuid”：“91634e9f-9a0b-406d-83f1-f0df7731c922”，
“用户名”：“BeautifullePart930”，
“密码”：“valkyrie”，
“盐”：“OEfVANKW”，
“md5”：“bda8ccb4284727538bd24994ee1a91ef”，
“sha1”：“f193f9836421fa287f01e8f8305140b0d2d87596”，
“sha256”：“28a0197375cdfc8d22ec0e388ef93f18705dcb909d6944719f217d60ac45cd24”
},
“dob”：{
“日期”：“1978-04-05T03:58:10Z”，
“年龄”：40
},
“注册”：{
“日期”：“2008-09-04T08:08:37Z”，
“年龄”：10岁
},
“电话”：“527-612-8558”，
“单元格”：“573-419-2272”，
“id”：{
“名称”：“，
“值”：空
},
“图片”：{
“大”：https://randomuser.me/api/portraits/men/60.jpg",
“中等”：https://randomuser.me/api/portraits/med/men/60.jpg",
“缩略图”：https://randomuser.me/api/portraits/thumb/men/60.jpg"
},
“nat”：“CA”
},
{
“性别”：“女性”，
“姓名”：{
“头衔”：“夫人”，
“第一”：“莉莉”，
“最后”：“坎贝尔”
},
“地点”：{
“街道”：“达尔豪西大街6239号”，
“城市”：“布罗克顿”，
“州”：“西北地区”，
“邮政编码”：“X6R 5W4”，
“坐标”：{
“纬度”：“44.3179”，
“经度”：“77.2683”
},
“时区”：{
“偏移量”：“+3:30”，
“描述”：“德黑兰”
}
},
“电子邮件”：“莉莉。campbell@example.com",
“登录”：{
“uuid”：“5e7f5ca7-1c6a-49cf-98ea-6993ba13e98d”，
“用户名”：“sadleopard720”，
“密码”：“面条”，
“盐”：“dO6LaBuZ”，
“md5”：“3b946373260729b1c598fc76b953b0f7”，
“sha1”：“9df4c90b67eb00fb5f46b291d006333418b837cb”，
“sha256”：“05bc6bc7749a7483e45afcd2cf13a44642253d69ad2164e7315d04ae12a54178”
},
“dob”：{
“日期”：“1995-10-01T19:06:38Z”，
“年龄”：23
},
“注册”：{
“日期”：“2013-10-20T00:40:17Z”，
“年龄”：5岁
},
“电话”：“474-554-3856”，
“单元格”：“280-264-4427”，
“id”：{
“名称”：“，
“值”：空
},
“图片”：{
“大”：https://randomuser.me/api/portraits/women/9.jpg",
“中等”：https://randomuser.me/api/portraits/med/women/9.jpg",
“缩略图”：https://randomuser.me/api/portraits/thumb/women/9.jpg"
},
“nat”：“CA”
},
{
“性别”
constructor(props){
    super(props);
    this.state ={ 
        isLoading: true,
        dataSource: [] // Add this
    }
}