React Context+TypeScript侧边栏切换：setActiveMenu失效问题求助

你的问题核心是Context Provider里没有绑定真正的状态更新逻辑——当前你直接给setActiveMenu传了一个空函数，自然没法修改activeMenu的值。

修正步骤： #

在ContextProvider组件内部，用React的useState钩子创建可响应的状态和对应的更新函数，再把它们传递给Provider的value。

修正后的完整代码： #

import React, { createContext, useContext, ReactNode, SetStateAction, Dispatch, useState } 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) => {
    // 用useState创建可更新的状态和setter
    const [activeMenu, setActiveMenu] = useState(true);

    return (
        <StateContext.Provider
            value={{ activeMenu, setActiveMenu }} // 传递真实的状态和更新函数
        >
            {children}
        </StateContext.Provider>
    )
}

export const useStateContext = () => useContext(StateContext)

关键说明： #

• 原来的Provider里activeMenu是固定值true，setActiveMenu是空函数，完全没有状态更新能力；
• 加入useState(true)后，activeMenu变成了响应式状态，setActiveMenu是真正能修改这个状态的函数；
• 现在在组件中调用setActiveMenu时，会触发Context状态更新，所有消费这个Context的组件都会同步更新。

内容的提问来源于stack exchange，提问作者Kareem Abbas