Добавление темного режима, но контекст не определен

Question

Я реализую тему в темном режиме, чтобы понять контекст React. У меня есть тот же код для моего компонента заголовка, и он работает нормально. Когда я пытаюсь добавить то же самое для моего основного тега, я получаю ошибку типа: _useContext не определен.

import React, { useContext } from 'react';
import Heading from './heading/heading';
import ThemeToggle from './heading/themeToggle';
import ThemeContextProvider from './context/ThemeContex';
import './App.css';
import { ThemeContext } from './context/ThemeContex';

const App = () => {
  const { light, dark, isLightTheme } = useContext(ThemeContext);
  const theme = isLightTheme ? light : dark;

  return (
    <>
      <ThemeContextProvider>
        <div className="grid">
          <>
            <Heading />
            <ThemeToggle />
          </>
          <main style={{ background: theme.bh, color: theme.color }}>
            <div className="first-container">
              <img src={require('./img/madeInAbyss.jpeg')} />
            </div>
            <div className="second-container"></div>
          </main>
        </div>
      </ThemeContextProvider>
    </>
  );
};

export default App;

здесь находится файл поставщика контекста, в котором есть только объект цветовой темы и состояние для переключения между темным и светлым режимами

import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

const ThemeContextProvider = props => {
  const [isLightTheme, setIsLightTheme] = useState(true);

  const colorTheme = {
    light: { ui: '#ddd', bg: '#eee' },
    dark: { color: '#fff', bg: '#15202b' }
  };
  console.log(colorTheme);

  const toggleTheme = () => {
    setIsLightTheme(!isLightTheme);
  };

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

export default ThemeContextProvider;

Answer 1

Вы используете значение ThemeContext до его инициализации в ThemeContextProvider.

const App = () => {
  // ThemeContext initial value is undefined (createContext())
  // will throw a runtime error
  const { light, dark, isLightTheme } = useContext(ThemeContext);

  return (
    <ThemeContextProvider>
      {/* ThemeContext initialized only on ThemeContextProvider render */}
      {/* after .Provider value is supplied */}
    </ThemeContextProvider>
  );
};

Чтобы исправить это, введите начальное значение:

// Should be in an outer scope.
const colorTheme = {
  light: { ui: '#ddd', bg: '#eee' },
  dark: { color: '#fff', bg: '#15202b' },
  isLightTheme: true,
};

export const ThemeContext = createContext(colorTheme);

const ThemeContextProvider = props => {
  ...

  return (
    <ThemeContext.Provider
      value={...}>
      {props.children}
    </ThemeContext.Provider>
  );
};