React Native - горизонтальная прокрутка с колонками

Question

Я пытаюсь реализовать следующее представление , где каждый столбец ограничен 4 рядами деталей песни в горизонтальном FlatList. Мне удалось создать каждую строку с деталями песни + кнопкой покупки в отдельном компоненте .

Однако я изо всех сил стараюсь ограничить каждый столбец только четырьмя рядами результатов. В настоящее время я рендеринг каждого компонента с функцией карты:

renderBestOfTheWeek = (items) => {
  return (
    <View>
      {items.map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
    </View>
  )
}

render() {
  return (
    <FlatList
      data={this.state.bestOfTheWeek}
      horizontal={true}
      renderItem={this.renderBestOfTheWeek}
    />
  )
}

SongItemHorizontalScroll компонент:

   <View style={containerStyle}>
      <Image
        source={{ uri: thumbnail_image }}
        style={albumImageStyle}
      />
      <View style={songDetailButtonContainer}>
        <View style={songInfoStyle}>
          <Text
            style={{ fontSize: 12, lineHeight: 14, width: 160 }}
            numberOfLines={1}>
            {title}
          </Text>
          <Text
            style={{ color: '#666', fontSize: 12, lineHeight: 14, width: 160 }} numberOfLines={1}
          >{artist} - {album}</Text>
        </View>
        <Button onPress={() => Linking.openURL(url)} price={price} />
      </View>
    </View>

Мои данные структурированы как таковые и в настоящее время хранятся в состоянии.

0: (4) [{…}, {…}, {…}, {…}]
1: (4) [{…}, {…}, {…}, {…}]
2: (4) [{…}, {…}, {…}, {…}]
3: (4) [{…}, {…}, {…}, {…}]

Однако я получаю следующее сообщение об ошибке ( TypeError: items.map не является функцией ).

Где я ошибся и каков будет правильный способ достижения этого?

Answer 1

Функция renderItem получает объект, содержащий элемент ключей и индекс.

Таким образом, вы должны иметь

renderBestOfTheWeek = ({ item }) => {

Answer 2

На основе предложений и помощи @Foyarash, вот решение:

renderBestOfTheWeek = ({ item }) => {
    return (
        <View>
            {item.map((songs, index) => <SongItemHorizontalScroll item={songs} key={index} />)}
        </View>
    )
}

Answer 3

Похоже, что где-то items стал Объектом вместо Массива, как и предполагалось. Попробуйте снова сделать его массивом.

renderBestOfTheWeek = (items) => {
  return (
    <View>
      {Array.from(items).map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}
    </View>
  )
}