如何将 API 数据传递给 SectionList 甲 React Native

Question

我需要在 react native 中显示按文件夹分组的用户名。

API 以这种方式返回。

[
{
    "id": 7,
    "url": "yyyy",
    "username": "user1@34.com",
    "dateupdate": "2020-12-18T22:23:01.000Z",
    "enable": 1,
    "folderid": 1,
    "descfolder": "Test Folder"
},
{
    "id": 6,
    "url": "xxxxx",
    "username": "user2@xxx.com",
    "dateupdate": "2020-12-18T22:22:25.000Z",
    "enable": 1,
    "folderid": 1,
    "descfolder": "Test Folder"
},
{
    "id": 4,
    "url": "URL997",
    "username": "Teste 9997",
    "dateupdate": "2020-12-18T22:18:19.000Z",
    "enable": 1,
    "folderid": 3,
    "descfolder": "Folder2"
},
{
    "id": 1,
    "url": "AMAZON URL",
    "username": "User5@amazon.com",
    "dateupdate": "2020-12-18T19:13:30.000Z",
    "enable": 1,
    "folderid": 3,
    "descfolder": "Folder2"
},
{
    "id": 5,
    "url": "YAHOO URL",
    "username": "User998@yahoo.com",
    "dateupdate": "2020-12-18T18:21:57.000Z",
    "enable": 1,
    "folderid": 2,
    "descfolder": "New folder"
}

]

我需要的结果是

测试文件夹 user1@34.com user2@xxx.com 文件夹 2 测试9997 User5@amazon.com 新建文件夹 User998@yahoo.com

Answer 1

使用 lodash，您可以执行以下操作：

import _ from "lodash";

const array = [
  {
    id: 7,
    url: "yyyy",
    username: "user1@34.com",
    dateupdate: "2020-12-18T22:23:01.000Z",
    enable: 1,
    folderid: 1,
    descfolder: "Test Folder"
  },
  {
    id: 6,
    url: "xxxxx",
    username: "user2@xxx.com",
    dateupdate: "2020-12-18T22:22:25.000Z",
    enable: 1,
    folderid: 1,
    descfolder: "Test Folder"
  },
  {
    id: 4,
    url: "URL997",
    username: "Teste 9997",
    dateupdate: "2020-12-18T22:18:19.000Z",
    enable: 1,
    folderid: 3,
    descfolder: "Folder2"
  },
  {
    id: 1,
    url: "AMAZON URL",
    username: "User5@amazon.com",
    dateupdate: "2020-12-18T19:13:30.000Z",
    enable: 1,
    folderid: 3,
    descfolder: "Folder2"
  },
  {
    id: 5,
    url: "YAHOO URL",
    username: "User998@yahoo.com",
    dateupdate: "2020-12-18T18:21:57.000Z",
    enable: 1,
    folderid: 2,
    descfolder: "New folder"
  }
];

console.log(_.groupBy(array, "descfolder"));

答案是：

{
   "Test Folder":[
      {
         "id":7,
         "url":"yyyy",
         "username":"user1@34.com",
         "dateupdate":"2020-12-18T22:23:01.000Z",
         "enable":1,
         "folderid":1,
         "descfolder":"Test Folder"
      },
      {
         "id":6,
         "url":"xxxxx",
         "username":"user2@xxx.com",
         "dateupdate":"2020-12-18T22:22:25.000Z",
         "enable":1,
         "folderid":1,
         "descfolder":"Test Folder"
      }
   ],
   "Folder2":[
      {
         "id":4,
         "url":"URL997",
         "username":"Teste 9997",
         "dateupdate":"2020-12-18T22:18:19.000Z",
         "enable":1,
         "folderid":3,
         "descfolder":"Folder2"
      },
      {
         "id":1,
         "url":"AMAZON URL",
         "username":"User5@amazon.com",
         "dateupdate":"2020-12-18T19:13:30.000Z",
         "enable":1,
         "folderid":3,
         "descfolder":"Folder2"
      }
   ],
   "New folder":[
      {
         "id":5,
         "url":"YAHOO URL",
         "username":"User998@yahoo.com",
         "dateupdate":"2020-12-18T18:21:57.000Z",
         "enable":1,
         "folderid":2,
         "descfolder":"New folder"
      }
   ]
}