React 中最近查看组件的改进

Question

我有这个使用 REST 国家/地区 API 创建的小应用程序。

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

如果您单击一张国家/地区卡片，它会显示在“最近查看”下方 header。到目前为止它工作正常，但我想稍微调整一下。我想我会做什么：

#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
    });
  }

Answer 1

实际上有多种解决方案，但让我们选择一个非常简洁易懂的解决方案：

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() 方法对我们不起作用，因为它修改原始数组而不是 return 新数组。相反，我们首先调用 .slice() 方法，它为我们解决了两个主要问题：它获取原始数组的一部分（在我们的例子中，索引为 0 和 1 的项）和 return 新数组。伟大的！现在我们可以轻松地使用 unshift 将国家添加到新数组的开头。然后简单地更新状态。

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

React 中最近查看组件的改进

Improvements to Recently Viewed Component in React

sorting

state

filter

reactjs