In TypeScript geschriebener React-Kontextanbieter

Question

Ich bin neu im React-Kontext und TypeScript und versuche, einen Kontext zum Öffnen und Schließen der Seitenleiste zu schreiben. Das ist mein Code

import React, { createContext, useContext, ReactNode, SetStateAction, Dispatch } from "react";



interface StateContextType {
    activeMenu: boolean
    setActiveMenu: Dispatch<SetStateAction<boolean>>;
}

export const StateContext = createContext<StateContextType>({
    activeMenu: true,
    setActiveMenu: () => {}
});



type ContextProviderProps = {
    children?: ReactNode
}

export const ContextProvider = ({ children }: ContextProviderProps) => {
    
    return (
        <StateContext.Provider
            value={{ activeMenu: true, setActiveMenu: () => { } }}
        >
            {children}
        </StateContext.Provider>
    )
}

export const useStateContext = () => useContext(StateContext)

Wenn ich versuche, Kontext in meiner Anwendung zu verwenden, funktioniert der boolesche Wert „activeMenu“ einwandfrei, was bedeutet, dass die Seitenleiste basierend auf seinem Wert angezeigt wird. Da ich den Standardwert auf „true“ setze, wird die Seitenleiste angezeigt und wenn ich sie manuell über den Kontextanbieter ändere, wird die Seitenleiste geschlossen. Das Problem hierbei ist jedoch, dass die Setter-Funktion „setActiveMenu“ überhaupt nicht funktioniert. Wie gesagt, ich bin ein Neuling im Reagieren von Kontext und Typoskript, in meiner Konsole werden keine Fehler angezeigt und ich weiß nicht, warum das passiert.

Answer 1

您不会将您的状态存储在任何地方，并且您的上下文需要一些支持。尝试一下

export const ContextProvider = ({ children }: ContextProviderProps) => {
    const [activeMenu, setActiveMenu] = useState(true);

    return (
        
            {children}
        
    )
}