Блог

У меня возникли проблемы с контекстом переключения. Сообщение об ошибке в заголовке указывает на строку кода ниже на моей панели навигации.

 const {theme} = useContext(ThemeContext); gt; 34 | const {toggle} = useContext(ToggleContext);  | ^  35 |   36 | return (  37 | lt;gt;   

Я действительно не понимаю, почему это так неопределенно, как у меня, повторяет тот же шаблон для контекста темы. Смотрите ниже мои компоненты.

Navbar.js

 import Image from "next/image"; import styles from "../../styles/Home.module.scss" import Logo from "../../public/Knowledge Memo.svg" import { useContext } from "react"; import { ThemeContext } from "../contexts/ThemeContext"; import { ToggleContext } from "../contexts/ToggleContext";  const navbarData = [  { id: "1",  title: "home",  ref: "#home"  },  { id:"2",  title: "Skills",  ref: "#skills"  },  { id:"3",  title: "The List",  ref: "#theList"  },  { id: "4",  title: "Team",  ref: "#team"  },  { id: "5",  title: "Contact",  ref: "#contact"  }, ];  function Navbar() {   const {theme} = useContext(ThemeContext);  const {toggle} = useContext(ToggleContext);   return (  lt;gt;  lt;nav className={  theme === "light" ?   "navbar navbar-expand-lg navbar-dark fixed-top":   "navbar navbar-expand-lg navbar-dark bg-dark fixed-top id= mainNav"}gt;  lt;div className="container d-flex flex justify-content-between"gt;  lt;a className="navbar-brand h-50" href="#page-top"gt;  lt;div className="navbar-brand"gt;   lt;Image   src={Logo}   alt="..."   fill="#fff"  objectFit="contain"  className="h-50"   /gt;  lt;/divgt;  lt;/agt;   lt;button   className="navbar-toggler collapsed"   type="button"   data-bs-toggle="collapse"   data-bs-target="#navbarResponsive"   aria-controls="navbarResponsive"   aria-expanded="false"   aria-label="Toggle navigation"  onClick={(event)=gt; {  }}gt;  Menu  lt;i className="fa fa-bars ms-1 navbar-toggler" aria-hidden="true"gt;lt;/igt;  lt;/buttongt;  lt;div className={ toggle === true ? "collapse navbar-collapse mt-2 id=navbarResponsive" : d-flex }gt;  lt;ul className="navbar-nav text-uppercase ms-auto py-4 py-lg-0"gt;  {navbarData.map((link,idx) =gt; {   return (  lt;li key={link.id} className="nav-item" data-index={idx}gt;lt;a className="nav-link" href={link.ref}gt;{link.title}lt;/agt;lt;/ligt;   );  })}  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;/navgt;  lt;/gt;  ); }  export default Navbar;  

ThemeContext.js

 import React, { createContext, useState} from "react"; import useTheme from "../hooks/useTheme";  export const ThemeContext = createContext();   function ThemeProvider ({children, startingTheme}) {  const { theme, setTheme } = useTheme(startingTheme);   return (  lt;ThemeContext.Provider value={  {theme, setTheme}  }gt;   {children}   lt;/ThemeContext.Providergt;  );  }  export { ThemeProvider };     

ToggleContext.js

 import React, { createContext} from 'react' import { useToggle} from "../hooks/useToggle";  export const ToggleContext = createContext();  function ToggleProvider ({children, startingToggle}){  const {toggle, setToggle} = useToggle(startingToggle);    return (  lt;ToggleContext.Provider value ={{toggle, setToggle}}gt;   {children}   lt;/ToggleContext.Providergt;  ); }  export { ToggleProvider }  

UseTheme.js

 import { useState } from "react";  function useTheme (startingTheme ="light") {   const [theme, setTheme] = useState(startingTheme);   function validateTheme (themeValue) {  if (themeValue === "dark") {  setTheme("dark");  } else {  setTheme("light");  }  }    return {  theme,  setTheme: validateTheme,  } }  export default useTheme;  

UseToogle.js

 import { useState } from "react";  function useToggle (startingToggle) {  const [toggle, setToggle] = useState(startingTheme);   return {  toggle,  setToggle  } }  export default useToggle;  

Layout.js

 import React, { useContext } from "react"; import { ThemeContext, ThemeProvider } from "../contexts/ThemeContext"; import { ToggleContext, ToggleProvider} from "../contexts/ToggleContext"; function Layout ({startingTheme, startingToggle, children}) {       return (  lt;gt;  lt;ThemeProvider startingTheme={startingTheme}gt;  lt;LayoutNoThemeProvider gt;{children}lt;/LayoutNoThemeProvidergt;  lt;/ThemeProvidergt;  lt;ToggleProvider startingToggle={startingToggle} gt;  lt;LayoutNoToggleProvidergt;{children}lt;/LayoutNoToggleProvidergt;  lt;/ToggleProvidergt;   lt;/gt;    ); }  function LayoutNoToggleProvider ({children}) {    const { toggle } = useContext(ToggleContext);  return (  lt;div className={  toggle === false ? "d-none" : "d-flex"  }gt;  {children}  lt;/divgt;  ) }   function LayoutNoThemeProvider ({ children }) {  const { theme } = useContext(ThemeContext);   return (  lt;gt;  lt;div className={  theme === "light" ? "container-fluid bg-white" : "container-fluid bg-dark"  }gt;  {children}  lt;/divgt;  lt;/gt;    ); } export default Layout;  

Навигационная панель

 import Image from "next/image"; import styles from "../../styles/Home.module.scss" import Logo from "../../public/Knowledge Memo.svg" import { useContext } from "react"; import { ThemeContext } from "../contexts/ThemeContext"; import { ToggleContext } from "../contexts/ToggleContext";  const navbarData = [  { id: "1",  title: "home",  ref: "#home"  },  { id:"2",  title: "Skills",  ref: "#skills"  },  { id:"3",  title: "The List",  ref: "#theList"  },  { id: "4",  title: "Team",  ref: "#team"  },  { id: "5",  title: "Contact",  ref: "#contact"  }, ];  function Navbar() {   const {theme} = useContext(ThemeContext);  const {toggle} = useContext(ToggleContext);   return (  lt;gt;  lt;nav className={  theme === "light" ?   "navbar navbar-expand-lg navbar-dark fixed-top":   "navbar navbar-expand-lg navbar-dark bg-dark fixed-top id= mainNav"}gt;  lt;div className="container d-flex flex justify-content-between"gt;  lt;a className="navbar-brand h-50" href="#page-top"gt;  lt;div className="navbar-brand"gt;   lt;Image   src={Logo}   alt="..."   fill="#fff"  objectFit="contain"  className="h-50"   /gt;  lt;/divgt;  lt;/agt;   lt;button   className="navbar-toggler collapsed"   type="button"   data-bs-toggle="collapse"   data-bs-target="#navbarResponsive"   aria-controls="navbarResponsive"   aria-expanded="false"   aria-label="Toggle navigation"  onClick={(event)=gt; {  }}gt;  Menu  lt;i className="fa fa-bars ms-1 navbar-toggler" aria-hidden="true"gt;lt;/igt;  lt;/buttongt;  lt;div className={ toggle === true ? "collapse navbar-collapse mt-2 id=navbarResponsive" : d-flex }gt;  lt;ul className="navbar-nav text-uppercase ms-auto py-4 py-lg-0"gt;  {navbarData.map((link,idx) =gt; {   return (  lt;li key={link.id} className="nav-item" data-index={idx}gt;lt;a className="nav-link" href={link.ref}gt;{link.title}lt;/agt;lt;/ligt;   );  })}  lt;/ulgt;  lt;/divgt;  lt;/divgt;  lt;/navgt;  lt;/gt;  ); }  export default Navbar;  

Может ли кто-нибудь указать, что я сделал не так? пожалуйста?

Большое спасибо,

Лео