reactjs - Material UI Switch 切换有错误并且不能正确更改

Question

我创建了一个简单的 React 项目，我在应用程序的抽屉中插入了一个 Material UI 开关，该开关将应用程序的主题从黑暗切换到明亮。问题是有时当我加载应用程序并单击开关时，前几次它没有响应。当我继续点击时，它会改变主题，但行为会被翻转：我进行切换的方式是在黑暗模式下检查/打开开关，在亮起时关闭，但现在，在没有响应之后前几次，它会改变行为，当它是轻模式时它会打开，反之亦然。

我切换开关的方式是这样的：

我使用的状态：

  const [isDark, setDarkMode] = React.useState(true);
  const [theme, setTheme] = React.useState(darkTheme);

切换主题功能：

const toggleTheme = () => {
    setDarkMode((prev) => !prev);
    setTheme(isDark ? darkTheme : lightTheme);
  };

这是我的开关：

<Switch edge="start" checked={isDark} onChange={toggleTheme} />

编辑：如果我这样做，这个问题仍然存在：

setTheme((prev) => prev === darkTheme? lightTheme: darkTheme);

结果：（行为仍然翻转）

代码：

我的 CodeSandbox 链接：https ://codesandbox.io/s/testing-karmapact-app-bghgp?file=/App.js

标签： reactjsmaterial-ui

Answer 1

您需要反转主题切换setTheme(isDark ? darkTheme : lightTheme);

如果当前是深色主题，那么您想要将它们设置为浅色，反之亦然。

const toggleTheme = () => {
  setDarkMode((prev) => !prev);
  setTheme(isDark ? lightTheme : darkTheme);
};