Javascript / React - 在另一个组件中呈现时单击从本地存储中删除特定项目

Question

我有一个在主页上显示电影缩略图的 React 应用程序（如 Netflix）。

当您单击缩略图时，会出现一个模式 window，您可以在其中单击按钮将电影添加到您的观看列表。这些电影将保存在本地存储中，如果您转到“监视列表”组件，您可以看到显示的所有喜欢的电影。

这是处理点击的代码（这个函数存储在上下文中）（我不使用 useState 因为 re-render 会触发更改在应用程序的后台）：

     const storageArray = [];
    
      const handleWatchlist = (objectData) => {
        let index = storageArray.indexOf(objectData);
    
        if (index === -1) {
          storageArray.push(objectData);
        } else {
          storageArray.splice(index, 1);
        }
        localStorage.setItem('currentWatchlist', JSON.stringify(storageArray));
        const retrieveData = JSON.parse(localStorage.getItem('currentWatchlist'));
        console.log(retrieveData);
      };

它在主页上运行得非常好。但是，在监视列表组件中，如果我单击缩略图，然后单击按钮以从存储中删除该项目，则会发生以下情况：

示例：localStorage 中存储了 1 部电影，在我点击之前：

在监视列表组件内部，单击按钮后，将其从存储和组件中删除：

当我点击按钮时，它并没有将其删除，而是认为它不重复，因此将新的 object 添加到本地存储（已删除如果我再次点击）。

我如何确保在单击监视列表组件中的收藏夹按钮时，存储会正确更新并从组件中删除电影？

感谢您的帮助。

Answer 1

您从一个空数组开始：

const storageArray = [];

然后检查 objectData 是否在数组中：

storageArray.indexOf(objectData);

这将永远找不到 localStorage 中的现有项目，因为您从未从 localStorage 中读取过。你需要做的是，当 handleWatchlist 被调用时：

从 localStorage 中读取并解析为列表
通过 objectData 中的唯一键在该列表中查找现有项目
- 如果存在，请将其删除
- 如果没有，请添加

它会是这样的：

const handleWatchlist = (objectData) => {
  let storageArray = JSON.parse(localStorage.getItem("currentWatchlist"));
  let existingItem = storageArray.find(item => item.id === objectData.id);
  
  if (existingItem) {
    let result = storageArray.filter(item => item.id !== objectData.id);
  } else {
    let result = [...storageArray, objectData];
  }
  localStorage.setItem("currentWatchlist", JSON.stringify(result));
};

Javascript / React - 在另一个组件中呈现时单击从本地存储中删除特定项目

Javascript / React - Remove specific item from Local Storage on click when rendered in another component

javascript

local-storage

reactjs

react-context