Pembekal React Context yang ditulis dalam TypeScript

Question

Saya baharu dalam konteks React dan TypeScript dan saya cuba menulis konteks untuk membuka dan menutup bar sisi. Ini kod saya

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)

Apabila saya cuba menggunakan konteks dalam aplikasi saya, "activeMenu" boolean berfungsi dengan baik, yang bermaksud bar sisi dipaparkan berdasarkan nilainya. Kerana saya menetapkan nilai lalainya kepada benar bar sisi ditunjukkan dan apabila saya menukarnya secara manual daripada pembekal konteks ia menutup bar sisi tetapi masalahnya di sini ialah fungsi penetap "setActiveMenu" tidak berfungsi sama sekali. Seperti yang saya katakan, saya baru mengenali konteks tindak balas dan skrip taip, tiada ralat muncul dalam konsol saya, dan saya tidak tahu mengapa ini berlaku.

Answer 1

Anda tidak menyimpan keadaan anda di mana-mana dan konteks anda memerlukan sedikit sokongan. Cubalah

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

    return (
        
            {children}
        
    )
}