React子组件意外更新父状态 MUI嵌套列表展开时父列表异常关闭

问题背景 #

• 技术栈：React 框架搭配 MUI 组件库
• 实现目标：基于 MUI List 组件开发支持嵌套子列表的交互列表功能
• 异常现象：触发嵌套子列表展开操作时，对应父级列表会意外关闭，经初步排查未定位到明确代码错误
• 复现说明：问题可在 CodeSandbox 环境稳定复现，异常交互效果可通过演示动图查看

问题原因 #

核心原因是 点击事件冒泡未拦截：子列表展开触发元素绑定的点击事件，会沿 DOM 结构向上冒泡到父级列表项的可点击区域，触发父级列表绑定的展开/收起切换逻辑，错误修改父级列表的展开状态，最终导致父级列表意外折叠。
部分场景下也会因为多层列表共用同一个展开状态变量，子项修改状态时直接覆盖了父级的展开状态值，触发异常关闭。

修复方法 #

• 拦截子元素点击冒泡：给子列表的展开按钮点击回调添加事件冒泡阻止逻辑，避免事件触发父级的切换逻辑

  const handleChildExpand = (e: React.MouseEvent) => {
    e.stopPropagation() // 阻止事件向上冒泡
    setChildOpen(prev => !prev)
  }
  

• 独立维护各层列表展开状态：不要用单个布尔值控制多层嵌套列表的展开态，建议用列表项唯一ID作为key，用对象结构统一存储所有层级列表项的展开状态，避免状态互相覆盖

  // 按项ID存储展开状态
  const [expandStatus, setExpandStatus] = useState<Record<string, boolean>>({})
  
  const handleToggleExpand = (e: React.MouseEvent, itemId: string) => {
    e.stopPropagation()
    setExpandStatus(prev => ({
      ...prev,
      [itemId]: !prev[itemId]
    }))
  }
  

• 检查嵌套Collapse容器的事件绑定：不要给子列表的折叠容器元素绑定会修改父级展开状态的点击事件，避免事件误触发。

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