使用Material-UI Switch触发SwitchBase非受控转受控状态警告如何解决

• 该警告本质是组件在非受控模式和受控模式之间发生了切换，不符合Material-UI组件的设计规则：组件第一次渲染时就会确定是受控还是非受控模式，生命周期内不允许切换。
• 具体到你的代码场景：你初始化companySettings时是空对象{}，第一次渲染Switch组件时，companySettings.payCCFee不存在，取值为undefined，Material-UI检测到checked属性为undefined，会自动将组件识别为非受控模式；当你第一次点击Switch后，payCCFee被赋值为布尔值，checked属性有了明确的受控值，组件又被识别为受控模式，因此抛出状态切换警告。

方案1：State初始化时添加属性默认值 #

声明state的时候直接给payCCFee设置布尔类型的初始值，保证第一次渲染时checked属性就有明确值：

// 按需设置初始值为false/true即可
const [ companySettings, setCompanySettings ] = useState({
  payCCFee: false
});

如果companySettings的值是异步从数据库拉取的，可以在拉取数据时做兜底处理：

useEffect(() => {
  // 调用接口拉取配置
  fetchCompanySettings().then(res => {
    setCompanySettings({
      // 兜底默认值，避免接口返回数据缺失该字段
      payCCFee: false,
      ...res.data
    })
  })
}, [])

方案2：给checked属性添加兜底判断 #

如果不想修改state初始化逻辑，可以直接在Switch组件的checked属性处加空值兜底：

<Switch 
  name="escrow" 
  checked={companySettings.payCCFee ?? false} // 取值为undefined/null时兜底为false
  onChange={() => setCompanySettings({...companySettings, payCCFee: !companySettings.payCCFee})} 
  aria-label="Company Pay CC Fee" 
/>

这里推荐使用空值合并运算符??而非逻辑或||：??只会在值为undefined或null时触发兜底，不会误处理false等合法布尔值，更符合当前场景需求。

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