Question

我正在使用 fetch 和 Flatlist 来获取和显示来自 laravel rest api 的 json 数据。我的 laravel api 输出就是这样

[
{"teacher": "alex","student":"roger","class":"6"}
{"teacher": "alex","student":"simmon","class":"6"}
{"teacher": "alexandra","student":"henry","class":"8"}
....
]

在 react native 中，我使用 fetch api 从 laravel 中获取数据

fetch('http://11.1.1.1:8000/api/get_data/' {
      method: 'get',
    })
      .then((response) => response.json())
      .then((responseJson) => {
         this.setState({ record: responseJson.data})
 })
      .catch((error) => {
        console.error(error);
      });

在平面列表中，我显示这样的数据

 <FlatList
          data={this.state.record}
          keyExtractor={(item, index) => index + ""}
          ListHeaderComponent={this.tableHeader}
          stickyHeaderIndices={[0]}
          renderItem={ 
            ({item}) => (
              <Text>{item.data.student}</Text>
              <Text>{item.data.class}</Text>


            ) 
          }
        />

我的输出就是这样

sr.no    student    class
1        roger      6
2        simmon     6
3        henry      8

但我想按老师姓名分组，我想要的输出就是这样

alex //teacher name
 sr.no    student    class
    1        roger      6
    2        simmon     6
alexendra //teacher name
 sr.no    student    class
    1        henry      8

如何在flatlist中使用reduce函数来实现那种输出？

Answer 1

您可以构建自己的函数：

var groupBy = function(xs, key) {
  return xs.reduce(function(rv, x) {
    (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
  }, {});
};

console.log(groupBy(this.state.record, 'teacher'))

或者您可以使用外部库，例如 lodash：

<块引用>

https://lodash.com/docs/4.17.15#groupBy

反应原生平面列表中的 groupby

1 个答案: