在 SectionList 中显示 Json - React Native

Question

我需要在 sectionlist 中显示 api 返回。

我的返回 API 是：

console.log(apidata)
Return is:
Array [
      Object {
        "descfolder": "Folder Test",
        "enable": 1,
        "folderid": 1,
        "id": 6,
        "url": "http://www.yahoo.com.",
        "userid": 2,
        "usernamepassword": "cx8",
      },
      Object {
        "descfolder": "Folder Test",
        "enable": 1,
        "folderid": 1,
        "id": 7,
        "url": "Www.amazon.com",
        "userid": 2,
        "usernamepassword": "cx7",
      },
      Object {
        "descfolder": "FolderXXX",
        "enable": 1,
        "folderid": 2,
        "id": 5,
        "url": "http://www.xxxx.com",
        "userid": 2,
        "usernamepassword": "cy558",
      },
      Object {
        "descfolder": "FolderXXX",
        "enable": 1,
        "folderid": 2,
        "id": 8,
        "url": "Http Secreto",
        "userid": 2,
        "usernamepassword": "cxfd222",
      },
      Object {
        "descfolder": "Folder5",
        "enable": 1,
        "folderid": 3,
        "id": 4,
        "url": "URL997",
        "userid": 2,
        "usernamepassword": "cxd654",
      },
    ]

如 SectionList 示例：https://reactnative.dev/docs/sectionlist

我想像下面的例子一样显示sectionList

文件夹 2 CX7 CX8 文件夹XXX cy558 cxfd222 文件夹5 CXD654

Answer 1

您必须将SectionList 与{title: '', data: []} 格式一起使用。所以在收到回复后，你必须像这样格式化你的JSON。

const DATA = [
  {
    "title": "Folder2",
    "data": [
      "CX7",
      "CX8"
    ]
  },
  {
    "title": "FolderXXX",
    "data": [
      "cy558",
      "cxfd222"
    ]
  },
  {
    "title": "Folder5",
    "data": [
      "cxd654"
    ]
  }
]

您也可以在data 键中提供对象。像这样

{
    "title": "Folder5",
    "data": [
       {
          "descfolder": "Folder5",
          "enable": 1,
          "folderid": 3,
          "id": 4,
          "url": "URL997",
          "userid": 2,
          "usernamepassword": "cxd654",
       }
    ]
  }

然后你可以在renderItem访问它。