使用TypeScript編寫的React Context提供者

Question

我是 React context 和 TypeScript 的新手，我正在嘗試編寫 context 來開啟和關閉側邊欄。這是我的程式碼

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)

當我嘗試在應用程式中使用上下文時，布林值「activeMenu」工作正常，這表示側邊欄根據其值顯示。因為我將其預設值設為true，所以會顯示側邊欄，當我從上下文提供者手動更改它時，它會關閉側邊欄，但這裡的問題是設定器函數「setActiveMenu」根本不起作用。正如我所說，我對反應上下文和打字稿都是新手，我的控制台中沒有顯示錯誤，而且我不知道為什麼會發生這種情況。

Answer 1

您不會將您的狀態儲存在任何地方，並且您的上下文需要一些支援。嘗試一下

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

    return (
        
            {children}
        
    )
}