如果项目已经存在并更改按钮状态，如何从存储在本地存储中的数组中删除项目

Question

在天气应用程序中，我尝试创建一个添加到收藏夹的功能。到目前为止，它部分工作，但有一些我似乎无法解决的错误，因为我什至不明白是什么导致了它们。

组件：

import React, { ReactNode, useState } from 'react';
interface Props {
  location?: string;
}
export const AddFavorite: React.FC<Props> = ({ location }: Props) => {
  let favorites: any = [];
  // const [favorite, setFavorite] = useState(false);
  const toggleFavoriteBtn = () => {
    const storageFavorites = localStorage.getItem('favorites');
    const index: number = favorites.indexOf(location);

    favorites = storageFavorites ? JSON.parse(storageFavorites) : [];
    if (index > -1) {
      favorites.splice(index, 1);
      // setFavorite(false);
    } else {
      favorites.push(location);
      // setFavorite(true);
    }
    localStorage.setItem('favorites', JSON.stringify(favorites));
  };
  return (
    <div>
      <button type="button" onClick={toggleFavoriteBtn}>
        {/* {favorite ? 'favorited' : 'not favorited'} */}
        favorite
      </button>
    </div>
  );
};

目前，我已经注释掉了 useState 部分，但稍后我会谈到它。

差不多，如果我运行此代码并测试按钮，我可以毫无问题地添加和删除位置，除非我重新加载页面或添加另一个位置，然后返回到我之前添加的位置。然后突然间，我的数组不再理解该位置已经在数组中，并再次添加它，此后它就变得疯狂，没有任何逻辑意义。

代码是这样设置的，还是我错过了什么？

其次，我添加了现在被注释掉的 useState 部分，因为我想使用它的全部原因是能够在该位置是否被收藏时更改按钮的外观。但是，它完全破坏了我的功能（虽然我不明白为什么它甚至会影响它）并且不是在正常情况下删除和添加一个项目，每次点击它只是进入这个不合逻辑的循环：

添加位置
再次添加位置（所以现在是在数组中两次)
删除其中一个重复位置

（每一步都是一次点击） 所以下次你点击 3 次时，相同的位置还剩下 2 个，下次还有 3 个，依此类推..

这是否可能是因为 useState 重新加载了一些奇怪的页面，所以它实际上只是之前运行ning 的错误或正在发生的事情..？ ._.

Answer 1

您遇到的最大问题是在构建组件时没有从 localStorage 加载收藏夹数组。

虽然，如果您有多个 AddFavorite 组件正在呈现，我修改它的方式将失败，因为当不同的组件进行更改时收藏夹数组不会更新。

为了让组件在其他组件进行更改时得到更新，我建议使用 redux、context，或者只在 parent 组件中维护收藏夹数组。

import React, { ReactNode, useState, useEffect } from 'react';
interface Props {
  location?: string;
}
export const AddFavorite: React.FC<Props> = ({ location }: Props) => {
  let [favorites, setFavorites] = useState(():any[]=>JSON.parse(localStorage.getItem('favorites')||'[]'));
  const favorite = favorites.includes(location);
  // const [favorite, setFavorite] = useState(false);
  useEffect(() => {
    const funct =  ()=>{
      setFavorites(JSON.parse(localStorage.getItem('favorites')||'[]'));
    };
    window.addEventListener('storage',funct);
    return () => {
      window.removeEventListener('storage',funct);
    }
  }, [])
  const toggleFavoriteBtn = () => {
    const index: number = favorites.indexOf(location);
    const newFavorites = favorites.slice();
    if (index > -1) {
      newFavorites.splice(index, 1);
      // setFavorite(false);
    } else {
      newFavorites.push(location);
      // setFavorite(true);
    }
    setFavorites(newFavorites);
    localStorage.setItem('favorites', JSON.stringify(newFavorites));
  };
  return (
    <div>
      <button type="button" onClick={toggleFavoriteBtn}>
        {favorite ? 'favorited' : 'not favorited'}
        favorite
      </button>
    </div>
  );
};

如果项目已经存在并更改按钮状态，如何从存储在本地存储中的数组中删除项目

How to remove item from array stored in localstorage if the item already exists and changing state of button

javascript

local-storage

reactjs

react-tsx