Material-UI的Switch切换后状态没变化是怎么回事？

端木瑞玲提问于 2026-02-16 15:50:23 阅读 27

组件

我在用Material-UI的Switch组件时，发现切换开关后状态一直没变。之前用checkbox没问题，换成Switch后就卡死了。我用了useState控制checked值，代码写成这样：


const [state, setState] = React.useState(false);

handleChange = () => {
  setState(!state);
};

return (
  <Switch
    checked={state}
    onChange={handleChange}
    color="primary"
  />
);

但点击开关完全没反应，控制台也没报错。我试过把onChange直接写成onChange={(e) => setState(e.target.checked)}，还是不行。是不是需要什么特殊配置？

我来解答赞 4 收藏

反馈

1 条解答

程序员书錦 Lv1

问题出在你的handleChange函数里，你用的是旧的state值，React的状态更新是异步的，直接这样改：

handleChange = () => {

  setState(prevState => !prevState);

};

或者更简单的写法，直接在onChange里处理：

<Switch

  checked={state}

  onChange={(e) => setState(e.target.checked)}

  color="primary"

/>

别问我为啥知道，踩过这坑。

2026-02-16 16:00