为何设置MUI Switch的onChange状态时切换过渡动画消失？

在使用MUI 5.8.4和React 18.2开发时，通过setInfo更新状态后，Switch组件的切换过渡动画无法正常工作。

问题原因 #

当前代码中使用setInfo({ ...info, [e.target.name]: e.target.checked })更新状态，依赖于props传入的info对象，可能因闭包捕获旧值导致状态更新不及时或异常，使得Switch组件无法正确感知checked状态的连续变化，进而导致过渡动画失效。

解决方案 #

将状态更新改为函数式更新，直接基于最新的前序状态进行修改，避免闭包带来的问题：

const handleChange = (e) => {
  setInfo(prevInfo => ({ ...prevInfo, [e.target.name]: e.target.checked }))
}

修正后的完整代码 #

import { Box, Typography, Switch, FormControlLabel, FormGroup } from '@mui/material'
import { useState } from 'react'

const SwitchBar = (props) => {
  const { name, content, info, setInfo } = props
  const handleChange = (e) => {
    // 使用函数式更新获取最新状态
    setInfo(prevInfo => ({ ...prevInfo, [e.target.name]: e.target.checked }))
  }
  return (
    <Box sx={{ bgcolor: '#EFF1F6', borderRadius: '7px', p: '11px 10px', height: '46px', maxWidth: '323px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <Typography variant='body14Med'>{content}</Typography>
      <FormGroup>
        <FormControlLabel
          control={
            <Switch name={name} checked={info[name]} onChange={handleChange} />
          }
        />
      </FormGroup>
    </Box>
  )
}

export default function Test () {
  const [info, setInfo] = useState({ test: false })
  // 优化：将布尔值转为更友好的文本显示
  return (
    <SwitchBar name='test' content={info.test ? '开启' : '关闭'} info={info} setInfo={setInfo} />
  )
}

注：原代码中content传入布尔值info.test，Typography直接显示布尔值不符合常规交互逻辑，已优化为显示对应文本，此修改不影响动画修复，仅为体验优化。

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