React App组件主题切换异常问题排查求助

核心问题 #

你的代码存在两处关键错误：

1. 错误引用主题对象：在_app.js中你试图通过ThemeContext.themes访问主题，但实际上themes是context.js中单独导出的对象，并非挂载在ThemeContext上的属性。
2. 状态更新逻辑依赖错误引用：切换主题时的判断条件使用了不存在的ThemeContext.themes，导致状态无法正确切换。

修复步骤 #

1. 修正_app.js中的主题引用 #

修改_app.js，直接导入单独导出的themes对象，替换错误的ThemeContext.themes引用：

import { ThemeContext, themes } from '../behaviour/context'; // 新增导入themes
import { useState } from 'react';

function App({ Component, pageProps }) {
  // 初始值改为直接使用themes.light
  const [currentTheme, setCurrentTheme] = useState(themes.light);

  function toggleTheme() {
    // 判断条件改用导入的themes对象
    setCurrentTheme(currentTheme === themes.light ? themes.dark : themes.light);
  }

  return (
    <ThemeContext.Provider value={currentTheme}>
      <button onClick={toggleTheme}>Toggle theme</button>
      <Component {...pageProps} />
    </ThemeContext.Provider>
  );
}

export default App;

2. 确保子组件正确消费ThemeContext #

如果子组件未正确使用useContext获取主题，也会看不到变化。示例子组件的正确使用方式：

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

function ExampleComponent() {
  const theme = useContext(ThemeContext);
  
  return (
    <div style={{ background: theme.background, color: theme.text, padding: '20px' }}>
      主题切换测试内容
    </div>
  );
}

export default ExampleComponent;

3. （可选）优化Context默认值 #

context.js中创建Context时，可将默认值设为themes.light，避免子组件在未被Provider包裹时出现异常：

import { createContext } from 'react';

export const themes = {
  light: {
    background: 'white',
    text: 'black'
  },
  dark: {
    background: 'black',
    text: 'white'
  }
};

// 默认值改为themes.light
export const ThemeContext = createContext(themes.light);

验证修复 #

点击切换按钮后，currentTheme状态会正确在themes.light和themes.dark之间切换，Provider会将更新后的主题传递给所有消费Context的子组件，子组件的样式也会随之变化。

内容的提问来源于stack exchange，提问作者Ritik Jangir