React JS中LocalStorage收藏列表问题：页面重载重复添加项

问题原因 #

页面重载时自动重复添加条目，通常是以下两种情况：

• 组件中存在自动触发收藏的逻辑（比如useEffect里无判断调用了handleToggleFavourite），导致页面加载时自动执行添加操作
• 添加收藏时没有严格校验ID是否已存在，出现重复写入

修正方案 #

1. 优化State与LocalStorage同步逻辑
   把LocalStorage的写入放到useEffect中，避免在点击事件中直接操作，保证State和LocalStorage的一致性：

   import { useState, useEffect } from 'react';
   
   // 初始化State
   const [storageItem, setStorageItem] = useState(() => {
     const savedFavourites = localStorage.getItem("favourites");
     return savedFavourites ? JSON.parse(savedFavourites) : [];
   });
   
   // 同步State到LocalStorage
   useEffect(() => {
     localStorage.setItem("favourites", JSON.stringify(storageItem));
   }, [storageItem]);
   

2. 严格校验重复添加
   修改收藏切换函数，基于State的前值判断，确保添加前ID不存在：

   const isFavourited = storageItem.includes(blok._uid);
   
   const handleToggleFavourite = () => {
     setStorageItem(prevItems => {
       if (prevItems.includes(blok._uid)) {
         // 取消收藏：过滤当前ID
         return prevItems.filter(id => id !== blok._uid);
       } else {
         // 添加收藏：仅当ID不存在时才添加
         return [...prevItems, blok._uid];
       }
     });
   };
   

3. 排查自动触发逻辑
   检查组件中是否有useEffect或其他生命周期代码，在页面加载时自动调用了handleToggleFavourite。如果是误加的逻辑，直接删除；如果是需要自动收藏的场景，必须先判断ID是否已存在：

   useEffect(() => {
     const savedFavourites = JSON.parse(localStorage.getItem("favourites") || "[]");
     // 仅当ID未收藏时才执行自动添加（如果确实需要这个逻辑）
     if (!savedFavourites.includes(blok._uid)) {
       handleToggleFavourite();
     }
   }, [blok._uid]);
   

内容的提问来源于stack exchange，提问作者Michele Bordiga