时间戳

首页 > 解决方案 > React 中最近查看的组件的改进

reactjs - React 中最近查看的组件的改进

问题描述

我有一个使用 REST 国家 API 创建的小应用程序。

https://rest-country-react.netlify.app/

如果您单击一个国家/地区卡，则它会显示在“最近查看”标题下。到目前为止它工作正常，但我想稍微调整一下。我以为我会做的：

#1 添加最近浏览的三个国家的限制，所以基本上如果用户点击4,5,6个国家，只显示最近点击的三个国家。

#2 访问过的国家目前按“最旧”到“最新”的顺序排序。我想扭转它，所以最新的获得第一个位置，然后是第二个最新的，然后是第三个，依此类推。

我被卡住了，因为我不确定如何实施这些调整。对于第一个，我认为我会在将状态数组映射到组件中之前对其进行过滤，例如...如果索引> 2，则将其过滤掉元素。

但是对于第二个，我还没有找到解决方案。也许我应该使用 unshift() 而不是使用 concat() 方法？根据我在 React 文档中阅读的内容，不建议直接编辑状态或其数组，所以我不知道该怎么做。

  onCountryClick(country) {
    const uniqueRecent = [
      ...new Set(this.state.recentlyViewed.concat(country)),
    ];
    this.setState({
      // ... other state updates here
      recentlyViewed: uniqueRecent
    });
  }

标签： reactjssortingfilterstate

解决方案

实际上有多种解决方案，但让我们采用一个非常干净且易于理解的解决方案：

onCountryClick(country) {
  const { recentlyViewed } = this.state;
  const newState = {}; // add your other updates here

  if (!recentlyViewed.includes(country)) {
    // firstly take first two items as a new array
    newState.recentlyViewed = recentlyViewed.slice(1);
    // add country into beginning of new array
    newState.recentlyViewed.unshift(country);
  }

  this.setState(newState);
}

首先，我们检查国家/地区是否已经存在于recentlyViewed数组中，如果不存在，则继续。更新状态时我们必须使用新数组，所以简单地调用unshift()方法对我们不起作用，因为它修改了原始数组并且不返回新数组。相反，我们首先调用.slice()方法，它为我们解决了两个主要问题：它获取原始数组的一部分（在我们的例子中，索引为 0 和 1 的项目）并与它们一起返回新数组。伟大的！现在我们可以轻松地使用unshift将国家添加到新数组的开头。然后简单地更新状态。

使用此解决方案，您始终会获得一个最多包含 3 个国家/地区的新数组，其中第一项是最新的。

推荐阅读