JavaScript。如何实现最后5个搜索查询的数组？

Question

我用城市名称的Searh构建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

这是因为您正在使用一套。

这是正在发生的事情，假设您输入了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()