使用 React Native 'fetch' 方法访问嵌套在数组中的第二级深度信息

Question

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

我在这里使用基本的“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}

这一次，它正确地返回了线路状态描述文本。但是安卓模拟器返回这个错误信息：

“子上下文类型失败：提供给CellRenderer 的number 类型的无效子上下文virtualizedCell.cellKey，应为string...

下面是我之前检查时数据库的内容。 （您还将在上面的 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 从数组中第二层中提取信息的指针。 我不需要遍历数据库。我只需要从那里提取一件事。

Answer 1

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

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