React出现Maximum update depth exceeded错误的原因与解决方案

1. 无限重渲染循环触发 #

你的useEffect依赖了tvs、movies、actors三个状态变量，当storage事件触发时，调用setTvs/setMovies/setActors更新状态，状态变化会再次触发useEffect执行。而useEffect每次执行都会调用getData，形成了“状态更新→触发useEffect→更新状态”的无限循环。

2. 重复绑定事件监听器 #

每次getData执行都会给window新增一个storage事件监听器，当localStorage变化时，所有已绑定的监听器都会被触发，多次调用状态更新函数，进一步加剧重渲染频率，最终超出React的最大更新深度限制。

1. 调整useEffect执行时机，避免重复绑定 #

将useEffect的依赖改为空数组，让它仅在组件挂载时执行一次，同时添加清理函数移除监听器，防止内存泄漏。

2. 重构数据加载逻辑 #

把从localStorage读取数据的逻辑封装成独立函数，初始化时直接加载数据，storage事件触发时复用该函数更新状态。

修正后的代码示例 #

import { useState, useEffect } from 'react';

function FavoriteCollection() {
  const [movies, setMovies] = useState([]);
  const [tvs, setTvs] = useState([]);
  const [actors, setActors] = useState([]);
  const [fav, setFav] = useState([FavList]);

  // 封装localStorage数据加载逻辑
  const loadFavorites = () => {
    try {
      // 读取并解析本地存储数据，默认空数组避免报错
      const tvLocal = JSON.parse(localStorage.getItem('FavTvs') || '[]');
      const moviesLocal = JSON.parse(localStorage.getItem('FavMovies') || '[]');
      const peopleLocal = JSON.parse(localStorage.getItem('FavActors') || '[]');

      setTvs([...tvLocal]);
      setMovies([...moviesLocal]);
      setActors([...peopleLocal]);
    } catch (err) {
      console.error('解析收藏数据失败:', err);
      // 解析失败时重置状态为空数组
      setTvs([]);
      setMovies([]);
      setActors([]);
    }
  };

  useEffect(() => {
    // 组件挂载时初始化加载收藏数据
    loadFavorites();

    // 定义storage事件处理函数
    const handleStorageUpdate = () => {
      loadFavorites();
    };

    // 绑定storage事件监听器
    window.addEventListener('storage', handleStorageUpdate);

    // 组件卸载时移除监听器，清理资源
    return () => {
      window.removeEventListener('storage', handleStorageUpdate);
    };
  }, []); // 空依赖数组，仅执行一次

  // 你的组件渲染逻辑...
  return (
    <div>
      {/* 渲染收藏内容 */}
    </div>
  );
}

额外注意事项 #

• storage事件仅在同源的其他窗口修改localStorage时触发，如果是当前窗口修改收藏数据，需要在修改完成后手动调用loadFavorites()更新状态。
• 添加try-catch处理JSON解析异常，避免因存储数据格式错误导致组件崩溃。

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