反应 localStorage 问题

Question

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

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

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

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

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

我有一个项目 here 的 codesandbox，如果你想多检查一下

Answer 1

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

所以一种方法可以是：

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

这将 return 在 favoriteBeers 数组或 undefined 中具有 beer id 的对象，如果未找到 id。

点击这里了解更多详情： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#find_an_object_in_an_array_by_one_of_its_properties

Answer 2

这是因为您正在尝试验证整个对象是否存在。相反，比较其字段之一（例如名称或 ID，如果唯一）。

让我们将 isFavorite 函数替换为：

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

Answer 3

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

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

并获得 100% 完美的结果。

反应 localStorage 问题

React localStorage issue

javascript

local-storage

reactjs

我有一个项目 here 的 codesandbox，如果你想多检查一下