React收藏卡片功能异常：可存储无法删除，状态不持久

核心问题分析 #

1. 无法删除卡片+setSavedCards is not a function报错：Faves组件内部自行实现删除逻辑，但在部分场景下未正确传入setSavedCards，且组件内增删操作未同步父组件状态，导致状态混乱。
2. 收藏状态无法保持：Faves组件的isFave初始值固定为false，未从localStorage读取已有收藏状态，导致Saved页面加载时图标状态错误。
3. 状态同步冲突：Faves组件和SavedCards组件各自维护增删逻辑，导致localStorage与组件状态不同步。

修复步骤 #

1. 重构Faves组件：简化逻辑，依赖父组件状态 #

将增删逻辑完全交给父组件，Faves仅负责根据传入状态显示图标并触发点击事件：

import React, { useState, useEffect } from "react";
import { CiBeerMugFull } from "react-icons/ci";

function Faves({ id, isSaved, onFaveToggle }) {
  // 用父组件传入的isSaved初始化状态，确保与全局收藏状态一致
  const [isFave, setIsFave] = useState(isSaved);

  // 监听父组件传入的isSaved变化，同步本地状态
  useEffect(() => {
    setIsFave(isSaved);
  }, [isSaved]);

  const handleFaveClick = () => {
    setIsFave(!isFave);
    onFaveToggle(id); // 通知父组件处理增删逻辑
  };

  return (
    <button onClick={handleFaveClick} style={{ border: "none", background: "transparent" }}>
      <CiBeerMugFull 
        className={`h-10 w-10 ${isFave ? "text-yellow-600" : "text-black"}`} 
      />
    </button>
  );
}

export default Faves;

2. 修复SavedCards组件：统一状态管理，修复事件监听 #

import React, { useState, useEffect } from "react";
import Card from "../cards/Card";
import Faves from "../faves/faves";

function SavedCards() {
  const [savedCards, setSavedCards] = useState([]);

  // 从localStorage加载初始收藏数据
  useEffect(() => {
    loadSavedCards();
  }, []);

  // 封装加载收藏卡片的通用函数
  const loadSavedCards = () => {
    const faveCards = JSON.parse(localStorage.getItem("faves") || "[]");
    setSavedCards(faveCards);
  };

  // 统一处理收藏切换逻辑（删除操作）
  const handleFaveToggle = (cardId) => {
    const currentFaves = JSON.parse(localStorage.getItem("faves") || "[]");
    const updatedFaves = currentFaves.filter(card => card.id !== cardId);
    
    localStorage.setItem("faves", JSON.stringify(updatedFaves));
    setSavedCards(updatedFaves);
  };

  // 修复storage事件监听：移除时使用同一个回调函数，避免内存泄漏
  useEffect(() => {
    const handleStorageChange = () => {
      loadSavedCards();
    };
    window.addEventListener("storage", handleStorageChange);
    return () => window.removeEventListener("storage", handleStorageChange);
  }, []);

  return (
    <div className="max-w-4xl mx-auto mt-10" id="faves">
      <h1 className="text-3xl font-bold text-center mb-10">Saved Events</h1>
      {savedCards.length === 0 && (
        <p className="text-center text-lg">No saved events yet.</p>
      )}
      {savedCards.map((card) => (
        <div key={card.id}>
          <Card {...card}>
            {/* 传入当前卡片的收藏状态（Saved页面中必然为true）和切换函数 */}
            <Faves 
              id={card.id} 
              isSaved={true} 
              onFaveToggle={handleFaveToggle} 
            />
          </Card>
        </div>
      ))}
    </div>
  );
}

export default SavedCards;

3. 主列表页使用Faves组件的注意事项 #

如果主列表页也使用Faves组件，需传入当前卡片的收藏状态及全局切换函数：

// 示例：主列表页的Card组件用法
const [allCards, setAllCards] = useState([]);
const savedCards = JSON.parse(localStorage.getItem("faves") || "[]");

const handleMainFaveToggle = (cardId) => {
  const targetCard = allCards.find(card => card.id === cardId);
  const currentFaves = JSON.parse(localStorage.getItem("faves") || "[]");
  
  let updatedFaves;
  if (currentFaves.some(card => card.id === cardId)) {
    // 删除收藏
    updatedFaves = currentFaves.filter(card => card.id !== cardId);
  } else {
    // 添加收藏
    updatedFaves = [...currentFaves, targetCard];
  }
  
  localStorage.setItem("faves", JSON.stringify(updatedFaves));
  // 触发storage事件，通知Saved页面同步更新
  window.dispatchEvent(new Event("storage"));
};

// 渲染Card时传入Faves组件
allCards.map(card => (
  <Card {...card} key={card.id}>
    <Faves 
      id={card.id} 
      isSaved={savedCards.some(c => c.id === card.id)} 
      onFaveToggle={handleMainFaveToggle} 
    />
  </Card>
))

关键修复点说明 #

• 单一数据源：所有收藏状态以localStorage为准，组件状态仅做同步展示，避免多源状态冲突。
• 子组件解耦：Faves组件不再处理业务逻辑，仅负责UI展示和事件触发，提升复用性。
• 修复内存泄漏：确保storage事件监听的添加与移除使用同一个回调函数。
• 统一逻辑入口：所有增删操作集中在父组件处理，减少代码冗余和错误概率。

内容的提问来源于stack exchange，提问作者Chaitanya Varma