反应本地存储问题答案

【问题标题】：React localStorage issue反应本地存储问题
【发布时间】：2021-03-20 22:42:50
【问题描述】：

我有一个应用程序，我从 API 获取数据并将其呈现到卡片中。有两个页面，Home 呈现卡片，Favorites 呈现已标记为收藏的卡片（每张卡片都有一个心形图标，指示它是否收藏）。有一个数组，其中所有标记为收藏的卡片都被推送，我正在将这个数组推送到 localStorage 和这个 useEffect：

 useEffect(() => {
    localStorage.setItem('my-beer-list', JSON.stringify(favoriteBeers));
  });

问题是在刷新时，Favorites页面保留了标记为喜欢的卡片，但它们在Home的对应卡片不再标记为收藏，并且可以再次选择导致重复的卡片在另一页。

以下函数检查卡片是否“收藏”，然后作为道具传递给卡片及其对应的模态

const isFavorite = (beer, favoriteBeers) => {
    return favoriteBeers.includes(beer);
  }

我有一个包含项目here 的代码框，以防您想进一步检查一下

【问题讨论】：

标签： javascript reactjs local-storage

【解决方案1】：

这是因为您正在尝试验证整个对象是否存在。相反，比较它的一个字段（例如，如果唯一，则为 name 或 id）。

让我们将 isFavorite 函数替换为：

const isFavorite = (beer, favoriteBeers) => {
  return favoriteBeers.some(e => e.name === beer.name)
};

【讨论】：

【解决方案2】：

由于isFavorite 方法中的beer 是一个对象，因此您无法验证对象数组favoriteBeers 是否包含它。

所以一种方法可以是：

const isFavorite = (beer, favoriteBeers) => {
  return favoriteBeers.find((favBeer) => favBeer.id === beer.id); 
}

这将返回在favoriteBeers 数组中具有beer id 的对象，如果找不到id，则返回undefined。

【讨论】：

【解决方案3】：

需要更新favoriteBeers.map(fav => fav.id).includes(beer.id)部分代码

const isFavorite = (beer, favoriteBeers) => {
   return favoriteBeers.map(fav => fav.id).includes(beer.id);
}

并获得 100% 完美的结果。

【讨论】：