页面重载后ReactJS的localStorage中新增空对象问题求助

我正在学习ReactJS中localStorage的使用，已成功将数据存储到数组中，但遇到一个问题：每次页面重载时，localStorage中都会新增更多空对象。不确定代码哪里出错了，代码如下：

const [favorites, setFavorites] = useState([])

const listFavorites = JSON.parse(localStorage.getItem('myFavorites') || '[]');
listFavorites.push(favorites)

useEffect(() => {
    localStorage.setItem("myFavorites", JSON.stringify(listFavorites));
   
}, [listFavorites])

控制台显示localStorage中出现多个空对象。

问题原因分析 #

1. 每次渲染都执行无效push：组件每次渲染（包括页面重载）时，都会执行listFavorites.push(favorites)，而favorites初始值是空数组，这就导致每次重载都把空状态添加到从localStorage取出的列表里，随后又存回localStorage，不断累积空内容。
2. 状态初始化未读取已有数据：useState初始值直接设为[]，没有从localStorage读取已存储的收藏数据，导致favorites始终从空数组开始，push操作自然会加入空内容。
3. 不必要的存储触发：listFavorites是组件渲染时每次重新创建的变量，作为useEffect的依赖会导致组件一渲染就触发存储操作，进一步放大问题。

修复后的代码 #

// 组件首次挂载时读取localStorage，作为favorites的初始值
const [favorites, setFavorites] = useState(() => {
  const savedFavorites = localStorage.getItem('myFavorites');
  return savedFavorites ? JSON.parse(savedFavorites) : [];
});

// 仅当favorites状态变化时，更新localStorage
useEffect(() => {
  localStorage.setItem("myFavorites", JSON.stringify(favorites));
}, [favorites]);

// 示例：添加收藏的正确方式
const addToFavorites = (newItem) => {
  // 使用函数式更新，确保基于最新的favorites状态操作
  setFavorites(prevFavorites => [...prevFavorites, newItem]);
};

修复要点说明 #

• 初始化读取localStorage：用useState的函数初始化形式，只在组件首次挂载时读取一次localStorage，避免重复读取。
• 状态变化时才存储：useEffect的依赖设为favorites，只有当收藏列表真正变化时，才将数据存入localStorage，避免无效操作。
• 函数式更新状态：添加新收藏时，使用setFavorites(prev => [...prev, item])，确保基于最新的状态更新，避免状态不一致问题。

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