.map() 一个数组到 renderRow() 中的 JSX 中

Question

我在使用 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）必须是 返回。您可能返回了未定义、数组或其他一些 无效对象。

因此，我知道这与地图中发生的事情有关，并且由于某种原因，JSX没有在renderRow（）函数中正确构造。 在没有映射的情况下返回一些基本的 JSX 工作正常。但我需要能够为数组的所有元素执行此操作。

map（） 甚至是最好的方法吗？任何帮助将不胜感激。

Answer 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>
  )
}