切换按钮不响应useContext

Question

我试图使用useContext切换导航栏按钮，但没有发生任何事情。我创建了一个ButtonContext文件并声明了一个isPressed变量。在App.tsx中，我创建了useCallBack，它在活动时做切换。

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()。