我是 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”根本不起作用。正如我所说,我对反应上下文和打字稿都是新手,我的控制台中没有显示错误,而且我不知道为什么会发生这种情况。
P粉7275312372024-03-29 16:09:43
您不会将您的状态存储在任何地方,并且您的上下文需要一些支持。尝试一下
export const ContextProvider = ({ children }: ContextProviderProps) => { const [activeMenu, setActiveMenu] = useState(true); return ({children} ) }