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

Answer 1

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

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

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