Fournisseur de contexte React écrit en TypeScript
P粉714780768
P粉714780768 2024-03-28 22:28:44
0
1
428

Je suis nouveau dans le contexte React et TypeScript et j'essaie d'écrire un contexte pour ouvrir et fermer la barre latérale. C'est mon 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)

Lorsque j'essaie d'utiliser le contexte dans mon application, le booléen "activeMenu" fonctionne correctement, ce qui signifie que la barre latérale s'affiche en fonction de sa valeur. Parce que j'ai défini sa valeur par défaut sur true, la barre latérale est affichée et lorsque je la modifie manuellement à partir du fournisseur de contexte, elle ferme la barre latérale mais le problème ici est que la fonction de définition "setActiveMenu" ne fonctionne pas du tout. Comme je l'ai dit, je suis nouveau dans la réaction au contexte et à la dactylographie, aucune erreur n'apparaît dans ma console et je ne sais pas pourquoi cela se produit.

P粉714780768
P粉714780768

répondre à tous(1)
P粉727531237

Vous ne stockez votre état nulle part et votre contexte a besoin de support. Essayez-le

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

    return (
        
            {children}
        
    )
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal