使用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}
        
    )
}