对React中最近查看的组件的改进
我有一个使用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
});
}回答 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个国家/地区的新数组，其中第一项是最新的。
https://stackoverflow.com/questions/68452792
复制相似问题
腾讯云开发者
