NextJS集成侧边栏报Maximum update depth exceeded错误求助

根因分析 #

你的报错不是第三方库本身的问题，是代码写法和组件交互逻辑触发了无限重渲染循环，具体原因如下：

1. Organizer 组件内的 setDashboardSelectedHandler 函数定义在组件顶层，每次组件重渲染都会生成全新的函数引用，作为prop传给 DashboardSidebar 后会触发子组件重渲染。
2. 你使用的 stylish-sidebar 组件会在初始化、props更新时自动触发当前激活菜单项的 onMenuItemClick 回调。你的回调逻辑中点击第一个Dashboard选项会调用 setDashboardSelected(true)，触发父组件 Organizer 重渲染，父组件重渲染又生成新的handler触发子组件重渲染，子组件重渲染又触发回调调用setState，形成死循环，最终触发最大更新深度超限的报错。

解决方案 #

你可以按优先级依次尝试以下修复方案：

• 第一步：用 useCallback 缓存handler函数，避免不必要的引用变更
  先修改Organizer组件的React导入语句，加入useCallback：

  import React, { useState, useCallback } from "react";
  

  再修改handler的定义，用useCallback包裹：

  const setDashboardSelectedHandler = useCallback((x) => {
    setDashboardSelected(x);
  }, []);
  

• 第二步：优化setState逻辑，避免无意义的状态更新
  修改Sidebar组件内的 handleMenuItemClick 逻辑，只有状态需要变更时才调用父组件传入的更新函数：

  const handleMenuItemClick = (event, index) => {
    console.log(index);
    if (index == 0) {
      // 用函数式更新，重复设置相同状态时不会触发重渲染
      props.var0(prevState => prevState === true ? prevState : true);
    }
  };
  

• 第三步：如果上述两个方案都无法解决，再考虑是 stylish-sidebar 库本身的内部逻辑存在缺陷，你可以换用其他侧边栏组件，或者自行实现简单的侧边栏功能。

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