切换按钮不与 useContext 反应

Question

我正在尝试使用 useContext 切换我的导航栏按钮，但没有任何反应。 我创建了一个 ButtonContext 文件并声明了一个 isPressed 变量。 在 App.tsx 中，我使用 useCallBack 创建，在活动时会切换 isPressed。

App.tsx：

const [isPressed, setIsPressed] = useState(false);
const toggleButton = useCallback(()=>{
    setIsPressed(!isPressed);
},[]);

const contextValue = {
    isLoggedIn: isLoggedIn,
    login: login,
    logout: logout,
    isPressed: isPressed,
    toggleButton: toggleButton
}
return (
    <AuthContext.Provider
        // Value will listening for isLoggedIn state changes
        value={contextValue}>
        <div className="App">
            <BrowserRouter forceRefresh={true}>
                <Switch>
                    <Route exact path="/">
                        <Home/>

ButtonContext.tsx：

export const ToggleButton = createContext({
isPressed:false,
toggleButton: ()=>{}
})

LoginBar.tsx：

import {ToggleButton} from "../../../shared/context/ButtonContext";

const LoginBar: React.FC = () => {

const hamburgerButton = useContext(ToggleButton);
const auth = useContext(AuthContext);

const [pressed, setIsPressed] = useState(false);

return (
    <React.Fragment>
        <div className="toggle-button">
            <span className="bar"> </span>
            <span className="bar"> </span>
            <span className="bar"> </span>
        </div>
        {hamburgerButton.isPressed && <MobileNavbar/>}
        {!hamburgerButton.isPressed && <div
            className={hamburgerButton.isPressed ? 'mobile-navbar' : 'login-bar'}>
            <ul>
                {!auth.isLoggedIn && <li><HeaderBtn btnName="Login" route="/login"/> 
              </li>}
                {auth.isLoggedIn && <li><HeaderBtn btnName="My cart" route="/cart"/> 
              </li>}
                {auth.isLoggedIn && <li><HeaderBtn btnName="Logout" route="/"/></li>}
            </ul>
        </div>}

    </React.Fragment>
)

}

Answer 1

在数组中添加isPressed

const toggleButton = useCallback(()=>{
    setIsPressed(!isPressed);
},[isPressed]);

你需要像这样访问上下文：

const {toggleButton} = useContext(AuthContext);

要更改值，您必须调用 toggleButton()。