@justedoit

Как прокинуть в один компонент разные данные?

Есть компонент Tabs, который отображает списки билетов с разной сортировкой:
По цене
По продолжительности

Соответственно, меняется таб - меняется сортировка.
Делаю вот что:
return (
    <div className='tabs'>
      <TabsComponent defaultActiveKey='1'>
        <TabPane tab='Самый дешёвый' key='1'>
          <TicketsList
            isLoading={loading}
            tickets={sortByPrices(visibleData)}
          />
        </TabPane>
        <TabPane tab='Самый быстрый' key='2'>
          <TicketsList
            isLoading={loading}
            tickets={sortByDuration(visibleData)}
          />
        </TabPane>
      </TabsComponent>
    </div>
  );
};


TicketsList - компонент, который получает массив и отрисовывает его. Я пытаюсь в пропсы передать один массив, но с разной сортировкой, но меняя табы получаю всегда сортированные по продолжительности.

Куда копать?
  • Вопрос задан
  • 94 просмотра
Решения вопроса 1
Wigard
@Wigard
const [items, setItems] = useState ([]); // вместо пустого массива массив с данными

function sortByPrices () {
  setItems (items => {
    // сортировка items по цене
    items = items.sort ((a, b) => a > b ? 1 : -1);
    return [...items];
  });
}

function sortByDuration () {
  setItems (items => {
    // сортировка items
    // ...
    return [...items];
  });
}

return (
  <div className='tabs'>
    <TabsComponent defaultActiveKey='1'>
      <TabPane tab='Самый дешёвый' key='1'>
        <TicketsList
          isLoading={loading}
          tickets={items}
        />
      </TabPane>
      <TabPane tab='Самый быстрый' key='2'>
        <TicketsList
          isLoading={loading}
          tickets={items}
        />
      </TabPane>
    </TabsComponent>
  </div>
);


при смене табов вызывать sortByPrices и sortByDuration в зависимости от таба

2 вариант - хранить тип сортировки в state, изменять массив через useMemo с state в зависимостях
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F
А что делают методы sortByPrices и sortByDuration? Дайте-ка попробую угадать - принимают в качестве параметра массив, и его же сортируют. Если так, то ответ на вопрос "куда копать" очевиден - копайте основы js, какие бывают типы данных, в чём их особенности. Массивы являются объектами, а объекты при присваивании / передаче в функцию / возврате из функции не копируются, копируются ссылки на них. То есть, два раза сортируется один и тот же массив - естественно, что при выводе будет дважды отображён результат последней сортировки.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы