React项目：解决Header随localStorage自动渲染及更新深度超限问题

这个警告的核心原因是组件渲染过程中触发了无限循环的状态更新——比如直接在组件函数体、无依赖的useEffect（或依赖项设置错误）、或者JSX内直接调用状态更新函数，导致组件反复渲染→更新状态→再渲染，形成死循环。结合你的场景，下面给出针对性的修复方案：

第一步：排查并修正Header组件的状态更新逻辑 #

之前的Header大概率是在渲染流程里直接调用了setState（比如没有用useEffect包裹初始化/更新逻辑），导致每次渲染都触发状态更新。我们需要把状态更新逻辑放到正确的时机：

import { useState, useEffect } from 'react';

function Header() {
  const [wishlistCount, setWishlistCount] = useState(0);

  // 封装获取心愿单数量的逻辑
  const updateWishlistCount = () => {
    const wishlist = JSON.parse(localStorage.getItem('wishlist')) || [];
    setWishlistCount(wishlist.length);
  };

  useEffect(() => {
    // 组件初始化时先获取一次数量
    updateWishlistCount();

    // 监听跨标签页的localStorage变化
    const handleStorageChange = (e) => {
      if (e.key === 'wishlist') updateWishlistCount();
    };
    window.addEventListener('storage', handleStorageChange);

    // 监听同标签页的心愿单更新事件
    const handleLocalUpdate = () => updateWishlistCount();
    window.addEventListener('wishlistUpdated', handleLocalUpdate);

    // 组件卸载时清理监听
    return () => {
      window.removeEventListener('storage', handleStorageChange);
      window.removeEventListener('wishlistUpdated', handleLocalUpdate);
    };
  }, []); // 空依赖数组，确保只在组件挂载/卸载时执行一次

  return (
    <header>
      心愿单：<span>{wishlistCount}</span>
    </header>
  );
}

export default Header;

第二步：修改ProductCard组件，触发更新通知 #

当商品添加到localStorage后，需要主动通知Header更新数量（同标签页下storage事件不会触发，所以用自定义事件）：

function ProductCard({ product }) {
  const addToWishlist = () => {
    const existingWishlist = JSON.parse(localStorage.getItem('wishlist')) || [];
    // 可选：避免重复添加同一商品
    if (!existingWishlist.some(item => item.id === product.id)) {
      const updatedWishlist = [...existingWishlist, product];
      localStorage.setItem('wishlist', JSON.stringify(updatedWishlist));
      // 触发自定义事件，通知Header更新
      window.dispatchEvent(new Event('wishlistUpdated'));
    }
  };

  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <button onClick={addToWishlist}>加入心愿单</button>
    </div>
  );
}

export default ProductCard;

关键修复点说明 #

1. 避免渲染时直接更新状态：把状态更新逻辑放到useEffect或事件回调里，不要在组件函数体、JSX元素属性里直接调用setState。
2. 合理设置useEffect依赖：空依赖数组确保初始化逻辑只执行一次，不会反复触发。
3. 跨场景更新通知：用storage事件处理跨标签页的localStorage变化，自定义事件处理同标签页的更新，覆盖所有场景。

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