React/TypeScript/MUI Dialog叠层问题：点击按钮后原对话框残留

问题根源 #

1. 类型定义错误：你将effectButtons的类型定义为Array<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>，但实际存入的是MUI的StyledButton组件节点，类型不匹配会导致React渲染时生成异常DOM节点，进而引发Dialog实例重复挂载残留。
2. 冗余依赖触发不必要重渲染：useMemo的依赖数组包含了char，但生成按钮的逻辑完全不依赖该状态，冗余依赖会导致组件频繁重渲染，加剧渲染异常。
3. 按钮生成逻辑的DOM操作风险：最初的实现中，已选按钮会被从数组中移除，结合类型错误，可能导致React的DOM diff算法出现误判，无法正确清理旧的Dialog节点。

解决方案 #

1. 修正类型定义与依赖数组 #

将effectButtons的类型改为Array<React.ReactNode>（React组件节点的正确类型），同时移除冗余的char依赖：

const effectButtons = useMemo(() => {
  const effectButtons: Array<React.ReactNode> = [];
  allGearEffectTypes.forEach((effectType, index) => {
    if (!gearEffects || !(gearEffects.includes(effectType))) {
      effectButtons.push(
        <StyledButton key={index} onClick={() => handleAddEffect(effectType)} variant="contained" sx={{ marginTop: 1, marginLeft: 1, marginRight: 1 }}>{effectType}</StyledButton>
      );
    } else {
      effectButtons.push(<StyledButton key={index} disabled={true} variant="contained" sx={{ marginTop: 1, marginLeft: 1, marginRight: 1 }}>{effectType}</StyledButton>)
    }
  });
  return effectButtons;
}, [gearEffects]); // 仅保留必要的gearEffects依赖

2. 优化按钮生成逻辑（可选） #

用map替代forEach，代码更简洁且符合React最佳实践：

const effectButtons = useMemo(() => {
  return allGearEffectTypes.map((effectType, index) => {
    const isSelected = gearEffects?.includes(effectType);
    return (
      <StyledButton
        key={index}
        onClick={() => !isSelected && handleAddEffect(effectType)}
        disabled={isSelected}
        variant="contained"
        sx={{ m: 1 }}
      >
        {effectType}
      </StyledButton>
    );
  });
}, [gearEffects]);

3. 确保父组件的Dialog切换逻辑严谨 #

在GearPanel.tsx中，必须保证同一时间仅渲染一个Dialog实例，通过currentStep严格控制每个Dialog的openDlg状态：

// 父组件示例逻辑
{currentStep === 0 && <NewGearNameDlg openDlg={true} closeDlg={handleStepChange} />}
{currentStep === 1 && <AddGearEffectDlg openDlg={true} closeDlg={handleStepChange} />}
{currentStep === 2 && <AddGearValueDlg openDlg={true} closeDlg={handleStepChange} />}

避免出现多个Dialog同时被渲染的情况。

4. 验证Dialog的open属性控制 #

确认AddGearEffectDlg的open属性完全由父组件传入的openDlg props控制，组件内部不自行修改该状态，保证状态一致性。

内容的提问来源于stack exchange，提问作者Tim Manchester