.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）。 您可能返回了undefined，數組或其他無效對象。

因此，我知道這與地圖中發生的事情有關，並且由於某種原因，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>
  )
}