NextJS中无法用useState更新函数覆盖Context API问题排查

核心问题：按钮点击事件未正确触发函数 #

你的切换按钮代码存在语法错误，当前写法只是返回了toggleTheme函数本身，并没有调用它：

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

这会导致点击按钮时没有执行切换逻辑，自然不会更新主题状态。

修复方案 #

将点击事件改为直接调用函数，两种正确写法任选其一：

写法1：直接绑定函数引用 #

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

写法2：在箭头函数内调用函数 #

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

额外验证点 #

确认你在使用toggleTheme的组件中，已经正确通过useContext获取了ThemeContext：

import { useContext } from 'react';
import ThemeContext from './theme-context';

// 组件内部逻辑
const { theme, toggleTheme } = useContext(ThemeContext);

你的ThemeContext Provider实现是正确的，themeHandler已经正确覆盖了Context默认的空函数，只要按钮点击逻辑修复，主题状态就能正常更新。

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