时间戳

首页 > 解决方案 > JavaScript。如何实现最后 5 个搜索查询的数组？

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

问题描述

我用城市名称用 Searh 构建 React-Redux 应用程序

在输入字段下，我需要查看我寻找的最后 5 个城市。为此，我创建了所有输入城市的数组，并通过道具，将它们转发到组件并使用Array.from(new Set(props.arr))并.slice(-5)创建一个新的 arr。

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 个搜索项的便捷方法是什么？

现场狙击

标签： javascriptarraysreactjssearchredux

解决方案

这是因为你使用的是一套。

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

推荐阅读