MUI Select非受控转受控报错及编辑场景默认值不选中问题咨询

问题原因 #

报错的根本原因是Select组件初始渲染时ticket为undefined，对应的value={ticket?.status}结果为undefined，此时MUI将其识别为非受控组件；等接口返回ticket数据后，value变成有值的字符串，组件切换为受控模式，就触发了切换警告。同时因为初始状态和接口返回不同步，也导致默认值无法正确匹配选中。

修复步骤 #

• 1. 删除重复声明的ticket状态：你的代码里两次写了const [ticket, setTicket] = useState<TicketFullDTO>();，属于重复声明，保留一个即可。
• 2. 给ticket状态设置初始值，避免初始为undefined：
     把原ticket的声明改成：

const [ticket, setTicket] = useState<TicketFullDTO>({
  title: '',
  status: '',
  submitDate: null
});

• 3. 给Select的value属性加兜底逻辑，保证全程为受控模式：
     将Select组件的value属性修改为：

value={ticket?.status ?? ''}

• 4. 同步Select状态和ticket数据：你当前Select的onChange只更新了单独的status变量，没有同步到ticket对象里，后续提交会出现数据不一致的问题，两种方案二选一：
     方案A：直接用ticket.status作为Select的数据源，修改onChange更新ticket对象：

  <Select
    labelId="status-label"
    id="status-helper"
    value={ticket?.status ?? ''}
    onChange={(e) => setTicket({...ticket, status: e.target.value as string})}
    required
  >
  

  方案B：单独维护status变量，新增useEffect同步接口返回的ticket.status到status状态：

  // 加在现有useEffect后面
  useEffect(() => {
    if(ticket?.status) setStatus(ticket.status)
  }, [ticket])
  
  // Select的value改为用status变量
  <Select
    labelId="status-label"
    id="status-helper"
    value={status}
    onChange={(e) => setStatus(e.target.value)}
    required
  >
  

• 5. 可选优化：接口加载完成前显示loading，避免用户提前操作：
     在返回的JSX里加判断，当ticket没有id或者ticketStatusList为空时显示加载提示，等数据返回后再渲染表单。
• 6. 修复提交逻辑的问题：你现有formSubmit函数里调用updateTicket时传入的data变量未定义，提交前需要把ticket、submitDate、status等字段合并为符合要求的TicketFullDTO对象再传入。

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