JavaScript. Как реализовать массив из последних 5 поисковых запросов ie?

Question

Я создаю приложение React-Redux с поиском по названию города

Под полем ввода мне нужно было увидеть последние 5 городов, которые у меня есть искал. Для этого я создаю массив всех введенных городов и реквизитов, пересылаю их компоненту и использую Array.from(new Set(props.arr)) и .slice(-5) для создания нового обр.

import React from 'react';

... ..

function SearchedCitys(props) {

  const uniqueSet = Array.from(new Set(props.citys));
  const citys = uniqueSet.slice(-5);

return (
    <Fragment>
      <div className="searched-citys-container">
        {citys.map((city) => (
          <City city={city} />
        ))}
      </div>
    </Fragment>
  );
}

.......

export default connect(mapStateToProps)(SearchedCitys);

В этом методе есть ошибка, когда я повторно ввожу старые значения, которые были сброшены из новый массив из 5 элементов, они больше не повторяются. Какой удобный способ отфильтровать исходный массив для отображения последних 5 найденных элементов?

LIVE sniped

Answer 1

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

Рабочая демонстрация

Answer 2

это потому, что вы используете набор.

вот что происходит, допустим, вы набрали 6 городов:

props.cities = [ a , b , c , d , e , f ]
uniqueSet = [ a , b , c , d , e , f ]
citys = [ b , c , d , e , f ]

теперь, когда вы добавляете еще один «a», ваш «uniqueSet» "сохранит первый a, поэтому его не будет в конце вашего нарезанного массива.

, поэтому вам нужно:

на редукторе, добавить новый город в начало массива:

case actionTypes.ADD_SEARCHED_CITY:
    return {
    ...state,
      citys: [action.payload,...state.citys],
      };

и в свой компонент searchCities :

function SearchedCitys(props) {
  const r = props.citys
  const uniqueSet = Array.from(new Set(r));
  const citys = uniqueSet.slice(0,5)


  return (
    <Fragment>
      <div className="searched-citys-container">
        {citys.map(city => (
          <City key={uuidv4()} city={city} />
        ))}
      </div>
    </Fragment>
  );
}

если вы хотите показать последний добавленный город справа, просто переверните нарезанный массив

  const citys = uniqueSet.slice(0,5).reverse()