.map() массив в JSX внутри renderRow()

Question

У меня возникли проблемы с использованием массива строк и «преобразования» в JSX с использованием функции map(), чтобы JSX мог сделать одну строку или строку в Посмотреть список.

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(): Действительный Реагировать элемент (или нуль) должны быть возвращены . Возможно, вы вернули undefined, массив или какой-либо другой недопустимый объект .

Поэтому я знаю, что это как-то связано с тем, что происходит на карте, и по какой-то причине JSX не создается должным образом внутри функции renderRow(). Возвращение некоторых базовых JSX без работы карт нормально .. но мне нужно иметь возможность сделать это для всех элементов моего массива.

Есть карта() даже лучший способ сделать это? Любая помощь будет принята с благодарностью.

Answer 1

Реагент не знает, как обращаться со списками элементов. Каждый компонент 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> 
) 
}