React中MUI全屏Dialog重渲染关闭及表单数据收集问题

90%的这类问题都是TransitionComponent定义位置错误导致的：

• 如果你把Transition组件的定义写在了Dialog所在组件的渲染函数内部，每次组件重渲染都会生成一个全新的Transition组件引用，MUI检测到传入的过渡组件变化，会直接执行退出逻辑关闭弹窗。
  修复方式非常简单：把Transition的React.forwardRef定义移到当前组件的模块作用域（也就是组件代码外面），不要放在组件函数体内部，保证重渲染时Transition的引用稳定。
• 次要排查点：你当前代码里Context Provider传入的value是每次渲染都新建的字面量对象，会导致所有消费Context的子组件跟着全量重渲染，虽然不会直接关弹窗，但容易引发子组件内部逻辑误触发onClose。可以用useMemo缓存context value：

  const contextValue = useMemo(() => ({
    advancedSearch,
    setAdvancedSearch
  }), [advancedSearch])
  // 传入的时候用缓存后的值
  <AdvancedSearchContext.Provider value={contextValue}>
  

• 最后确认下控制弹窗显隐的open状态没有被意外重置，不要在渲染逻辑里写会修改open状态的副作用。

把表单状态下放到各个Form子组件是更优的实现，能避免父组件存大状态导致的全量重渲染，有两种常用实现：

• 方案一：ref暴露子组件方法（无额外依赖）
  父组件为每个Form子组件创建ref，子组件通过useImperativeHandle向外暴露自身的校验方法、取值方法。点击提交时，父组件依次调用所有子组件的校验逻辑，全部通过后拉取各子组件的表单值，合并后提交即可。
  父组件核心代码：

  const form1Ref = useRef(null)
  const form2Ref = useRef(null)
  const form3Ref = useRef(null)
  
  const handleSubmit = async () => {
    // 逐个校验表单
    const formValid = (await Promise.all([
      form1Ref.current?.validate(),
      form2Ref.current?.validate(),
      form3Ref.current?.validate()
    ])).every(Boolean)
    if (!formValid) return
  
    // 收集全量数据
    const searchParams = {
      ...form1Ref.current?.getValues(),
      ...form2Ref.current?.getValues(),
      ...form3Ref.current?.getValues()
    }
    // 执行搜索逻辑
  }
  
  // JSX部分
  <Form1 ref={form1Ref} />
  <Form2 ref={form2Ref} />
  <Form3 ref={form3Ref} />
  <Button onClick={handleSubmit}>Search</Button>
  

  单个Form子组件示例：

  import { forwardRef, useImperativeHandle, useState } from 'react'
  
  const Form1 = forwardRef((_, ref) => {
    const [formData, setFormData] = useState({
      // Form1负责的字段，比如selectIdentify、type
    })
  
    useImperativeHandle(ref, () => ({
      validate: () => {
        // 实现当前表单的校验逻辑，返回布尔值代表是否通过
      },
      getValues: () => formData
    }), [formData])
  
    // 表单输入渲染逻辑
  })
  

• 方案二：使用轻量表单库（字段多的场景推荐）
  直接引入轻量表单库，在Dialog层级放置表单的Provider，各个Form子组件可以独立注册自己负责的字段、维护输入状态，不需要自己写Context和状态传递逻辑。父组件提交时直接调用库提供的提交、取值方法就能拿到全量表单数据，这类库本身自带字段级别重渲染优化，不会因为单个输入触发整个Dialog重渲染，也能从根源上避免之前的重渲染关弹窗问题。
• 如果你要继续沿用当前的Context维护全量状态，记得更新状态时用函数式更新，避免直接修改状态对象导致的渲染异常：

  setAdvancedSearch(prev => ({
    ...prev,
    // 要更新的具体字段
  }))
  

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