React提示过多重渲染：renderDialogue函数问题求解

问题根源在于你直接在渲染函数renderDialogue中调用setExpandMenu(false)——每次组件渲染时，只要窗口宽度≥654px，就会触发状态更新；而状态更新又会强制组件重新渲染，形成无限循环，最终导致React抛出过多重渲染的警告。

核心修复思路 #

• 禁止渲染阶段更新状态：React明确禁止在组件渲染过程中（包括渲染时执行的函数）调用setState，这会触发无限渲染循环。
• 用useEffect监听窗口变化：将窗口宽度的判断逻辑放到副作用钩子中，仅当宽度变化且满足条件时，才更新expandMenu状态。
• 缓存窗口宽度状态：把当前窗口宽度存入状态，避免每次渲染都直接读取window.innerWidth，同时保证所有逻辑使用的宽度值一致。

修改后的完整代码 #

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [expandMenu, setExpandMenu] = useState(false);
  // 新增状态存储当前窗口宽度
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  const handleOpenMenu = () => {
    setExpandMenu(!expandMenu);
  };

  // 监听窗口resize事件，实时更新窗口宽度状态
  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);
    // 组件卸载时移除监听，防止内存泄漏
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 当窗口宽度≥654px时，自动关闭菜单
  useEffect(() => {
    if (windowWidth >= 654) {
      setExpandMenu(false);
    }
  }, [windowWidth]);

  const renderDialogue = () => {
    if (windowWidth < 654) {
      return (
        <Dialog
          open={expandMenu}
          handler={handleOpenMenu}
          size={"xl"}
          className={"bg-transparent shadow-none "}
        >
          <DialogBody>
            <div className={"relative"}>
              <img
                src={"/imgFolder2/cloud.webp"}
                className={"h-full float-center"}
              />
              <ul className={"flex flex-col justify-center h-[75%] gap-5 text-2xl text-center absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[55%]"}>
                {NavItems()}
              </ul>
            </div>
          </DialogBody>
        </Dialog>
      );
    }
    return null;
  };

  const NavItems = () => {
    return paths.map((path, idx) => (
      <li key={idx}>
        <Link
          href={getPath(idx)}
          className={`text-black block ${
            isSelectedPath(getName(idx, true))
              ? "border-b-4 border-buttonBG"
              : ""
          }`}
          onClick={() => {
            if (windowWidth < 654) setExpandMenu(!expandMenu);
          }}
        >
          {getName(idx)}
        </Link>
      </li>
    ));
  };

  return (
    {/* 你的组件其他渲染内容 */}
    {renderDialogue()}
  );
};

export default YourComponent;

额外优化说明 #

• 将NavItems中的window.innerWidth替换为状态windowWidth，确保所有逻辑使用的宽度值一致。
• renderDialogue的空返回改为null，符合React组件返回规范。
• Dialog的handler属性直接传递handleOpenMenu，避免冗余的箭头函数创建。

内容的提问来源于stack exchange，提问作者MD. MEHEDI IMAM