首页 > 解决方案 > 使用 React Native 'fetch' 方法访问嵌套在数组中的第二级深层信息

问题描述

我可以访问数组顶层的信息。但是我无法访问数据库中第二层的东西。

我在这里使用基本的“获取”方法:

https://facebook.github.io/react-native/docs/network

这是我试图访问的数据库。(我从 URL 中删除了我的 API 密钥,但它看起来仍然有效。如果它不再适用于您,我已将内容复制并粘贴到下面的代码部分。) https://api .tfl.gov.uk/Line/london-overground/Status

我想访问当前线路状态的简短描述文本(例如“轻微延迟”、“减少服务”等)。相关信息存储在数据库中的“lineStatuses”/“statusSeverityDescription”下。

请参阅下面我迄今为止对 Expo Snack 样本的尝试。

选项1)

https://snack.expo.io/@leourushi/api-call-01

如果我使用

{item.name} 

它正确地返回了行的名称。

但是,如果我尝试这个,

{item.lineStatuses.statusSeverityDescription} 

屏幕不会返回任何内容。

选项 2)

https://snack.expo.io/@leourushi/api-call-02

我修改了 dataSource 的初始实例,如下所示:

dataSource: responseJson[0].lineStatuses

然后,我试图返回这个:

{item.statusSeverityDescription}

这一次,它正确地返回了线路状态描述文本。但 Android 模拟器返回此错误消息:

“失败的子上下文类型:提供给virtualizedCell.cellKey的类型的子上下文无效,预期......numberCellRendererstring

以下是我之前检查时数据库的内容。(您还将在上面的 Expo 链接中看到相同的数据库)

[
  {
    "$type": "Tfl.Api.Presentation.Entities.Line, Tfl.Api.Presentation.Entities",
    "id": "london-overground",
    "name": "London Overground",
    "modeName": "overground",
    "disruptions": [],
    "created": "2019-06-03T16:21:44.04Z",
    "modified": "2019-06-03T16:21:44.04Z",
    "lineStatuses": [
      {
        "$type": "Tfl.Api.Presentation.Entities.LineStatus, Tfl.Api.Presentation.Entities",
        "id": 0,
        "lineId": "london-overground",
        "statusSeverity": 7,
        "statusSeverityDescription": "Reduced Service",
        "reason": "LONDON OVERGROUND: Until further notice, reduced service between Gospel Oak and Barking. A temporary timetable is in place, with four car trains running every 30 minutes. New trains may provide additional services, resulting in an increased frequency. Tuesday 28, Wednesday 29, Thursday 30 and Friday 31 May, the 2313 Barking to Gospel Oak service will terminate at Upper Holloway at 23:40 and the 23:25 train from Gospel Oak to Barking will not run and the last departure will be at 22:48",
        "created": "0001-01-01T00:00:00",
        "validityPeriods": [
          {
            "$type": "Tfl.Api.Presentation.Entities.ValidityPeriod, Tfl.Api.Presentation.Entities",
            "fromDate": "2019-05-20T03:30:00Z",
            "toDate": "2019-08-25T01:29:00Z",
            "isNow": false
          }
        ],
        "disruption": {
          "$type": "Tfl.Api.Presentation.Entities.Disruption, Tfl.Api.Presentation.Entities",
          "category": "Information",
          "categoryDescription": "Information",
          "description": "LONDON OVERGROUND: Until further notice, reduced service between Gospel Oak and Barking. A temporary timetable is in place, with four car trains running every 30 minutes. New trains may provide additional services, resulting in an increased frequency. Tuesday 28, Wednesday 29, Thursday 30 and Friday 31 May, the 2313 Barking to Gospel Oak service will terminate at Upper Holloway at 23:40 and the 23:25 train from Gospel Oak to Barking will not run and the last departure will be at 22:48",
          "additionalInfo": "For train times see the <a href=\"http://content.tfl.gov.uk/gospel-oak-to-barking-temporary-timetable-march-2019.pdf?5\">temporary timetable</a>. For more information and travel options, visit <a href=\"https://tfl.gov.uk/modes/london-overground/gospel-oak-to-barking-improvements?cid=gospel-oak-barking-trains\">tfl.gov.uk/gospel-oak-barking-trains</a>",
          "created": "2019-05-14T14:07:00Z",
          "affectedRoutes": [],
          "affectedStops": [],
          "closureText": "reducedService"
        }
      }
    ],
    "routeSections": [],
    "serviceTypes": [
      {
        "$type": "Tfl.Api.Presentation.Entities.LineServiceTypeInfo, Tfl.Api.Presentation.Entities",
        "name": "Regular",
        "uri": "/Line/Route?ids=London Overground&serviceTypes=Regular"
      },
      {
        "$type": "Tfl.Api.Presentation.Entities.LineServiceTypeInfo, Tfl.Api.Presentation.Entities",
        "name": "Night",
        "uri": "/Line/Route?ids=London Overground&serviceTypes=Night"
      }
    ],
    "crowding": {
      "$type": "Tfl.Api.Presentation.Entities.Crowding, Tfl.Api.Presentation.Entities"
    }
  }
]

我想要一个关于如何使用 React Native 从埋在数组中第二层的东西中提取信息的指针。我不需要遍历数据库。我只需要从那里提取一件事。

标签: arraysdatabasereact-nativeobjectfetch

解决方案


您的密钥格式是数字似乎是一个问题。

使用选项 2(这是填充数据源的正确方法),并添加.toString()到您的密钥提取器中,如下所示 -keyExtractor={({id}, index) => id.toString()}


推荐阅读