React.js本地存储实现多条目收藏夹功能问题求助

问题根源 #

1. 字符串类型的存储值导致判断逻辑错误：你初始化useLocalStorage时传入了JSON.stringify([])作为默认值，使得storageItem始终是JSON字符串而非数组。直接用storageItem.includes(id)是做字符串包含判断，会出现误判（比如id=1会匹配字符串里的"10"），且无法正确识别数组中的元素。
2. 重复手动序列化/反序列化易出错：每次操作都重复JSON.parse和JSON.stringify，不仅冗余，还可能因为格式问题导致数据异常。

修复后的代码 #

import React 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 }) => {
  // 直接传入数组作为初始值，useLocalStorage会自动处理序列化/反序列化
  const [favourites, setFavourites] = useLocalStorage("favourites", []);

  // 用数组原生includes判断，确保匹配逻辑准确
  const isFavourited = favourites.includes(id);

  const handleToggleFavourite = () => {
    if (!isFavourited) {
      // 添加收藏：展开现有数组并加入新ID
      setFavourites([...favourites, id]);
    } else {
      // 取消收藏：过滤掉当前ID
      setFavourites(favourites.filter(savedId => savedId !== id));
    }
  };

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

export default Fv;

关键修复点 #

• 简化存储值处理：react-use-localstorage支持自动处理JSON序列化/反序列化，直接传入数组作为初始值，favourites会始终保持数组类型，无需手动转换字符串。
• 准确的收藏状态判断：使用数组原生的includes方法判断ID是否存在，避免字符串匹配的误判问题。
• 数组操作逻辑优化：直接通过展开运算符和filter方法操作数组，逻辑清晰且不易出错。

内容的提问来源于stack exchange，提问作者Omor Faruk