大佬教程收集整理的这篇文章主要介绍了状态不随 useContext 改变，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
你好
我正在尝试进行菜单切换，其中我有一个以 false 作为初始值的变量，使用 react createContext 和 useContext 钩子，我将初始状态设置为 true
// useMenu Context
import React,{ useContext,useState } from 'react'
export const usetoggle = (initialState) => {
const [isToggled,setToggle] = useState(initialState)
const toggle = () => setToggle((prevstate) => !prevstate)
// return [isToggled,toggle];
return { isToggled,setToggle,toggle }
}
const initialState = {
isMenuOpen: true,toggle: () => {},}
export const MenuContext = React.createContext(initialState)
const MenuProvIDer = ({ children }) => {
const { isToggled,toggle } = usetoggle(false)
const closeMenu = () => setToggle(false)
return (
<MenuContext.ProvIDer
value={{
isMenuOpen: isToggled,toggleMenu: toggle,closeMenu,}}>
{children}
</MenuContext.ProvIDer>
)
}
export default MenuProvIDer
export const useMenu = () => {
return useContext(MenuContext)
}
所以如果为真，它将显示菜单，如果为假，它将在有 div 的地方显示 div
App.Js
const { isMenuOpen } = useMenu()
//the provIDder
<MenuProvIDer>
<header mode={theme} modeFunc={toggletheme}/>
{isMenuOpen ? (
<Menu />
) : (
<Switch>
<Route path='/writing' component={Writings} />
<Route path='/Meta' component={Meta} />
<Route path='/contact' component={Contact} />
<Route path='/project' component={Project} />
<Route exact path='/' component={Home} />
<Route path='*' component={NotFound} />
</Switch>
)}
<Footer />{' '}
</MenuProvIDer>
当我添加一个 onclick 事件时，菜单的 Navlink 按钮关闭它不起作用
菜单
const { closeMenu } = useMenu()
// return statement
{paths.map((item,i) => {
return (
<MenuItem
key={i}
link={item.location}
svg={item.icon}
path={item.name}
command={item.command}
onClick={closeMenu}
/>
)
})}
我哪里做错了
我怀疑问题出在 App 您有一个 useMenu 钩子 outside MenuProvider in {{ 1}}。此 App 钩子使用 useMenu 上下文，但在没有提供程序的情况下，它使用默认的初始上下文值。
MenuContextReact.createContext
const initialState = {
isMenuOpen: true,toggle: () => {},};
export const MenuContext = React.createContext(initialState);
export const useMenu = () => {
return useContext(MenuContext)
};
创建一个上下文对象。当 React 渲染一个组件时
订阅此 Context 对象，它将读取当前上下文
值来自树中其上方最接近匹配的 const MyContext = React.createContext(defaultValue);
。
Provider 参数仅在组件没有
在树中在其上方有一个匹配的 Provider。 这个默认值可以
有助于隔离测试组件，无需包装它们。
由于我怀疑您是否想运行/提供多个菜单提供程序，我相信解决方案是将 defaultValue 移出并包装 MenuProvider 以提供您正在通过嵌套组件更新的上下文。
App.jsx
Appindex.jsx (?)
const { isMenuOpen } = useMenu();
...
<>
<Header mode={theme} modeFunc={toggleTheme}/>
{isMenuOpen ? (
<Menu />
) : (
<Switch>
<Route path='/writing' component={Writings} />
<Route path='/meta' component={Meta} />
<Route path='/contact' component={Contact} />
<Route path='/project' component={Project} />
<Route exact path='/' component={Home} />
<Route path='*' component={NotFound} />
</Switch>
)}
<Footer />
</>
以上是大佬教程为你收集整理的状态不随 useContext 改变全部内容，希望文章能够帮你解决状态不随 useContext 改变所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。