redux 如何在本地存储React.js上添加收藏夹列表

ej83mcc0 于 2022-11-12 发布在 React

关注(0)|答案(1)|浏览(141)

我想实现添加到收藏夹列表的功能。但它只适用于单个项目。我需要多个项目。我使用useRef挂钩并使用此npm包react-use-localstorage
问题是我的本地存储无法正常工作。它总是更新一个项目，但我需要它作为一个数组，即[1，2，4，7，10]

如果我重新载入我的页面，只有3个数字ID将填满心脏🤨

import React, { useRef } from "react";
import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
import Favorite from "@mui/icons-material/Favorite";
import IconButton from "@mui/material/IconButton";
import useLocalStorage from 'react-use-localstorage';

const Fv = ({ id }) => {
  const [storageItem, setStorageItem] = useLocalStorage(
    "favourites",
    JSON.stringify([])
  );

  //const storagedArray = useRef(JSON.parse(storageItem));
  //const isFavourited = storagedArray.current.includes(id);
  const isFavourited = storageItem.includes(id)

  const handleToggleFavourite = () => {
    if (!isFavourited) {

      setStorageItem(JSON.stringify([...JSON.parse(storageItem), id]));

    } else {

      setStorageItem(
        JSON.stringify(
          JSON.parse(storageItem).filter((savedId) => savedId !== id)
        )
      );

    }

  return (
    <IconButton onClick={handleToggleFavourite}>
    {isFavourited ? <Favorite color="error" /> : <FavoriteBorder color="error" />}
  </IconButton>
  );

};

export default Fv;

分配组件

<Fv id={product.id} />

redux

来源：https://stackoverflow.com/questions/73823861/how-can-i-add-favorite-list-on-local-storage-react-js

1条答案

按热度按时间

kqqjbcuj1#

好吧，说实话，我不知道为什么你的数组会这样。也许是这个外部库出了故障。你不需要使用任何外部库来管理你的favourites状态。下面是一个没有react-use-localstorage的解决方案：

import React, { useState } from "react";
import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
import Favorite from "@mui/icons-material/Favorite";
import IconButton from "@mui/material/IconButton";

const Fv = ({ id }) => {
  const [storageItem, setStorageItem] = useState(() => JSON.parse(localStorage.getItem("favourites") || "[]"))

  const isFavourited = storageItem.includes(id)

  const handleToggleFavourite = () => {
    if (!isFavourited) {

      const newStorageItem = [...storageItem, id]
      setStorageItem(newStorageItem);
      localStorage.setItem("favourites", JSON.stringify(newStorageItem))

    } else {

      const newStorageItem = storageItem.filter((savedId) => savedId !== id)
      setStorageItem(newStorageItem);
      localStorage.setItem("favourites", JSON.stringify(newStorageItem))

    }

  return (
    <IconButton onClick={handleToggleFavourite}>
    {isFavourited ? <Favorite color="error" /> : <FavoriteBorder color="error" />}
  </IconButton>
  );

};

export default Fv;

赞(0）回复(0）举报 2022-11-12

我来回答

redux 如何在本地存储React.js上添加收藏夹列表

1条答案

相关问题

热门标签

最新问答