.map() 一个数组到 JSX 里面 renderRow()答案

【问题标题】：.map() an array into JSX inside renderRow().map() 一个数组到 JSX 里面 renderRow()
【发布时间】：2017-06-14 06:29:08
【问题描述】：

我无法使用 map() 函数获取字符串数组并将其“转换”为 JSX，以便 JSX 可以在 ListView 中创建一行或一行。

  renderRow: function(rowData) { //rowData is an Array
    return rowData.map((data) => {
      // now data is a single element of my array
      return <View><Text> <Emoji size={40} name={data} /></Text></View>
      // also tried ( ) around the above for the return
    });
  },
  render: function() {
    return (
        <ListView contentContainerStyle={styles.list}
          enableEmptySections={true}
          initialListSize={500}
          pageSize={20}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => this.renderRow(rowData)}
        />
    )
  }

我得到的错误如下：

StaticRenderer.render()：必须是有效的 React 元素（或 null）回来。您可能返回了未定义、数组或其他一些无效的对象。

因此，我知道这与地图中正在发生的事情有关，并且由于某种原因，在 renderRow() 函数中没有正确构造 JSX。返回一些没有地图的基本 JSX 工作正常。但我需要能够为我的数组的所有元素做到这一点。

map() 是不是最好的方法？任何帮助将不胜感激。

【问题讨论】：

您看过文档吗？renderRow 函数的返回值应该是什么？我想它不应该是一个数组。所以这个问题与 JSX 或 React 没有任何关系。
@Felix 你是对的。我没有参考该函数的返回类型的文档。感谢您指出了这一点。不过，这对我或其他任何人都毫无帮助。

标签： javascript react-native ecmascript-6 mapping jsx

【解决方案1】：

React 不知道如何处理元素列表。每个组件render 方法，以及像renderRow 这样的回调，通常都需要返回一个元素。

您需要将项目包装在 View 或其他容器元素中：

renderRow: function(rowData) { //rowData is an Array
  return (
    <View>
      {rowData.map((data) => {
        return <View><Text> <Emoji size={40} name={data} /></Text></View>
      })}
    </View>
  )
}

【讨论】：

啊。我没有意识到这一点。感谢您解释问题发生的原因并提供示例解决方案。非常感谢。