[英]React useContext Returning Undefined
struggling to with react contexts being used with functional components.努力应对与功能组件一起使用的反应上下文。 I feel like I'm doing everything right here, so any help would be much appreciated.
我觉得我在这里做的一切,所以任何帮助将不胜感激。
First I define a context (HeaderHoverContext.js)首先我定义一个上下文(HeaderHoverContext.js)
import React, { createContext, useState } from "react";
export const HeaderHoverContext = createContext();
export function HeaderHoverProvider(props) {
const [currentHover, setHover] = useState(false);
const toggleHover = (e) => {
setHover(true);
}
return (
<HeaderHoverContext.Provider value={{currentHover, toggleHover}}>
{props.children}
</HeaderHoverContext.Provider>
);
}
I wrap the provider within my header (Header.js)我将提供程序包装在我的 header (Header.js) 中
import React, { Component, useContext } from 'react'
import './header.css'
import Headerbutton from './Headerbutton';
import Hoverviewcontainer from './Hoverviewcontainer'
import {HeaderHoverProvider} from './contexts/HeaderHoverContext'
export default function Header() {
return (
<div className='header'>
<div className='header-right'>
<HeaderHoverProvider>
<Headerbutton text="Misc1" id="misc1" />
<Headerbutton text="Misc2" id="misc2" />
<Hoverviewcontainer id="misc3"/>
<Hoverviewcontainer id="misc4"/>
</HeaderHoverProvider>
</div>
</div>
);
}
Any then lastly, I try to retrieve the context using the useContext hook, but sadly its undefined.最后,我尝试使用 useContext 挂钩检索上下文,但遗憾的是它未定义。
import React, { useContext } from 'react'
import { HeaderHoverContext } from "./contexts/HeaderHoverContext";
export default function Hoverviewcontainer(props) {
const { isHover, setHover } = useContext(HeaderHoverContext);
// Returns undefined
console.log(`Current hover value is ${isHover}`)
return (
<div className={props.isHover ? 'hidden' : 'nothidden'} onMouseEnter={setHover}>
<div className="caret" id={props.id}/>
</div>
)
}
Any ideas what I might be missing here?有什么我可能在这里遗漏的想法吗?
The fields in your context aren't called isHover
and setHover
, they are called currentHover
and toggleHover
, so either use them in the destructor or destruct manually:您上下文中的字段不称为
isHover
和setHover
,它们称为currentHover
和toggleHover
,因此要么在析构函数中使用它们,要么手动析构:
const context = useContext(HeaderHoverContext);
const isHover = context.currentHover;
const setHover = context.toggleHover;
By the way, your toggle hover has a bug, never sets it to false.顺便说一句,您的切换 hover 有一个错误,永远不要将其设置为 false。 Try this instead:
试试这个:
const toggleHover = () => setHover(current => !current);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.