Блог

Главная - Вопросы по программированию - Рендеринг разделов во flatlist / sectionlist из одного набора данных

Рендеринг разделов во flatlist / sectionlist из одного набора данных

#react-native

#react-native

Вопрос:

У меня есть некоторые данные JSON, которые выглядят следующим образом:

 {
  "distance":"1",
  "name":"whatever",
  "listPriority":"1",
}

Я передаю это в Flatlist :

 <FlatList
                    key={'my-list'}
                    data={JSON}
                    renderItem={this.renderCard}
                    keyExtractor={(item, index) => index.toString()}
                />

Что я хочу сделать, так это разделить данные на основе приоритета списка, чтобы все элементы со значением для ключа listPriority, равным 1, отображались под заголовком моего раздела с надписью «Это элементы для 1», а значение ключа listPriority, равное 2, имело заголовок раздела с надписью «Заголовок раздела 2» и так далее.

Т.е. в результате получается что-то вроде этого:

Приоритет списка 1

  • элемент в списке
  • элемент в списке

Приоритет списка 2

  • элемент в списке
  • элемент в списке

Приоритет списка 3

  • элемент в списке
  • элемент в списке

Как я могу перенести разделы в свой Flatlist ?

Sectionlist кажется, только если вы передаете отдельные наборы данных для каждого введенного вручную раздела.

Комментарии:

1. Возможно, вы могли бы упорядочить / сгруппировать входные данные перед передачей их в <FlatList> ?

2. @DacreDenny Это план B. Просто кажется излишеством, если в этих компонентах есть базовая функциональность, которой мне не хватает.

3. Да, понимаю это — я думаю, что это будет вашим лучшим выбором. Дайте мне знать, если вам нужна помощь с кодом для этого

Ответ №1:

Казалось бы, вы могли бы использовать компонент SectionList, который предоставил бы вам заголовки и (если хотите) их привязку, что является приятным поведением. Итак, вам просто нужно создать массив объектов, которые соответствуют необходимому формату, чтобы компонент работал должным образом.

 <SectionList
  renderItem={({item}) => someFunctionHere(item)/<SomeComponent item={item}>}
  sections={sections}
  keyExtractor={(item, index) => index.toString()}
/>

Определите sections как массив формата:

 [
  { 
    title: "List priority 1", 
    data: [{"distance":"1", "listPriority": "1"...}, ...]
  },
  { 
    title: "List priority 2", 
    data: [{"distance":"20", "listPriority": "2"...}, ...]
  },
  ...
]

Итак, опять же, просто отформатируйте свои данные (скорее всего, в componentDidMount хук), и когда данные будут отформатированы, вы можете включить их в состояние и в конечном итоге передать в SectionList компонент, чтобы он повторно отображался