嗨，我目前正在构建一个NextJS应用程序。我想实现黑暗和光明的主题，所以我创建了一个主题上下文，将存储应用程序的主题状态（黑暗模式和光明模式）。

我目前的解决方案

1.我使用true-false数据类型来表示黑暗和光明模式。

1. true表示暗，false表示亮。默认值为false。
   1.为了切换主题，我为它创建了一个函数
   1.我直接在同一个文件中创建了上下文提供程序组件。它被称为ThemeContextProvider。
   1.为了更新上下文数据，我使用useState，如下所示。
   1.使用该逻辑，我将上下文值与提供程序中的useState数据一起传递。
   1.我用来自useState的setTheme覆盖来自context的toggleTheme。
   1.我正在触发导航栏中的toggleTheme fn（切换按钮）。

期待

1.每当我点击切换按钮时，上下文中的toggleTheme fn实际上并没有被useState中的setTheme覆盖，因此上下文中的主题数据将不会更新。有人能告诉我为什么会发生这种情况吗？如果你们感到困惑，请看看我下面的代码
下面是我的主题上下文代码

import { createContext, useState } from "react";

const ThemeContext = createContext({
  //false: lightmode, true: darkmode
  theme: false,
  toggleTheme: () => {},
});

export const ThemeContextProvider = (props) => {
  //false: lightmode, true: darkmode
  const [theme, setTheme] = useState(false);

  const themeHandler = () => {
    setTheme(!theme);
    console.log("toggled!");
  };

  return (
    <ThemeContext.Provider
      value={{
        theme,
        toggleTheme: themeHandler,
      }}
    >
      {props.children}
    </ThemeContext.Provider>
  );
};

export default ThemeContext;

这是我的切换按钮

<button onClick={() => toggleTheme}>Toggle theme</button>