渲染ListItem元素显示空白

Question

我正在使用react-native，并试图从反应元素库中渲染ListItem元素。我有以下代码：

renderLocationAndTrainList() {
    console.log('renderLocationAndTrainList');
    console.log(this.props.outboundTrains);
    return this.props.outboundTrains.map((train, idx) => {
      <ListItem 
        key={idx}
        title={train.station}
      />
    })
  }
  render() {
    return (
      <View>
        {this.renderLocationAndTrainList()}
      </View>
    )
  }
}

当我在模拟器中渲染它时，什么也没有渲染，屏幕是空白的，也没有错误消息。

console.log在this.props.outboundTrains数组上显示以下内容：

[12:16:03] renderLocationAndTrainList
[12:16:03] Array [
[12:16:03]   Object {
[12:16:03]     "baseLocation": "Newhall, Harlow",
[12:16:03]     "createdAt": "2019-02-16T20:01:35.846Z",
[12:16:03]     "objectId": "8Z9jqYl5vW",
[12:16:03]     "station": "Harlow Mill",
[12:16:03]     "trainTime1": "7:25 AM",
[12:16:03]     "trainTime2": "7:50 AM",
[12:16:03]     "updatedAt": "2019-02-17T12:09:59.053Z",
[12:16:03]   },
[12:16:03]   Object {
[12:16:03]     "baseLocation": "Newhall, Harlow",
[12:16:03]     "createdAt": "2019-02-17T12:08:46.446Z",
[12:16:03]     "objectId": "vJGMw2xU2n",
[12:16:03]     "station": "Harlow Town",
[12:16:03]     "trainTime1": "7:48 AM",
[12:16:03]     "trainTime2": "8:02 AM",
[12:16:03]     "updatedAt": "2019-02-17T12:09:48.789Z",
[12:16:03]   },
[12:16:03] ]

我在做什么错？

这不是这里的另一个问题的重复，因为该问题的答案没有解决我的问题。

Answer 1

您需要返回listItem

return this.props.outboundTrains.map((train, idx) => {
  return <ListItem 
    key={idx}
    title={train.station}
  />
})

或更改括号

return this.props.outboundTrains.map((train, idx) => (
  <ListItem 
    key={idx}
    title={train.station}
  />
))