Использование карты против плоского списка в React Native - PullRequest
Новая
       35

Использование карты против плоского списка в React Native

0 голосов
/ 23 апреля 2020

Я изо всех сил пытаюсь правильно использовать .map () в массиве объекта состояния для отображения элементов. Вот мой код 

class EventListFront extends Component {
    state = {
        currentEvent: new event(),
        events: new eventList(),
    }
...
<View>
   {this.state.events.events.map(event => {
        <View key={event.id}>{event.title}</View>})}

</View>

Структура моего события выглядит следующим образом: 

class event {
    constructor(
        id = -1,
        name = 'UNSET',
        description = 'UNSET',
        location = 'UNSET',
        ...
        ) {}

(eventList - это массив событий, и он избыточно имеет идентификатор 'events')

С этой реализацией у меня ничего не отображается при добавлении в массив. Я попытался использовать FlatList, но для этого требуются ключи / идентификаторы для каждого элемента. Я не уверен, как

  1. обновить страницу новым списком при добавлении нового события
  2. получить элементы событий, которые будут отображаться в элементах, используя .map ()
  3. использовать сгенерированный идентификатор, чтобы он мог правильно отображаться с помощью FlatList.

1 Ответ

1 голос
/ 23 апреля 2020

кажется, что в вашем коде есть несколько проблем:

  • , как прокомментировал Том Слуцкий, вам нужно вернуть компонент в обратном вызове, который вы передадите своей функции карты. Есть несколько случаев для возвращаемого значения в функциях стрелок в зависимости от того, как вы их пишете. Синтаксис функций стрелок
  • Кажется, что вы всегда используете один и тот же идентификатор в своих событиях (-1), но при рендеринге списка элементов React требует наличия уникальных ключей для каждого составная часть. Если вы обновите свое состояние с помощью set setState, выдвинув новый элемент в массив событий, ваш компонент будет перерисован и обновлен.

Что касается использования Flatlist, они имеют оптимизацию производительности, которая полезна, если Вы обрабатываете длинные списки компонентов. Если вы используете карту, весь ваш список будет отображаться, даже если компоненты не видны на экране. При использовании Flatlist отображаются только видимые компоненты.

...