问对React中最近查看的组件的改进
EN

Stack Overflow用户

提问于 2021-07-20 09:46:11

回答 1查看 140关注 0票数 0

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

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

如果您点击一个国家/地区卡，它将显示在"Recently“标题下。到目前为止，它工作得很好，但我想稍微调一下。我想我应该做的是：

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

#2访问过的国家/地区目前按从“最旧”到“最新”的顺序排序。我想颠倒这一点，让最新的获得第一个位置，然后是第二个新的，然后是第三个，依此类推。

我被卡住了，因为我不确定如何实现这些调整。对于第一个，我认为我应该先过滤状态数组，然后再将其映射到组件中，如下所示：如果index > 2，则将其过滤出元素。

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

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

reactjs

sorting

filter

state

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-20 10:36:56

实际上有多种解决方案，但让我们选择非常干净和易于理解的解决方案：

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将country添加到新数组的开头。然后简单地更新状态。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68452792

复制

SpringMVC表单验证器的使用

spring boot

本章讲解SpringMVC中怎么通过注解对表单参数进行验证。 SpringBoot配置使用springboot， spring-boot-starter-web会自动引入 hiberante-validator, validation-api依赖。在 WebMvcConfigurerAdapter实现类里面添加验证器及国际化指定资源文件。 @Override public Validator getValidator() { LocalValidatorFactoryBean validat

Java技术栈

2018/03/30

1.8K0