反应 useContext 返回未定义
React useContext Returning Undefined
努力处理与功能组件一起使用的反应上下文。我觉得我在这里做所有事情,所以任何帮助将不胜感激。
首先我定义了一个上下文(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>
);
}
我将提供商包装在我的 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>
);
}
然后最后,我尝试使用 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>
)
}
有什么想法我可能在这里遗漏了什么吗?
您上下文中的字段不称为 isHover
和 setHover
,它们称为 currentHover
和 toggleHover
,因此要么在析构函数中使用它们,要么在析构函数中使用它们手动:
const context = useContext(HeaderHoverContext);
const isHover = context.currentHover;
const setHover = context.toggleHover;
顺便说一下,您的切换悬停有一个错误,永远不要将其设置为 false。试试这个:
const toggleHover = () => setHover(current => !current);
努力处理与功能组件一起使用的反应上下文。我觉得我在这里做所有事情,所以任何帮助将不胜感激。
首先我定义了一个上下文(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>
);
}
我将提供商包装在我的 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>
);
}
然后最后,我尝试使用 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>
)
}
有什么想法我可能在这里遗漏了什么吗?
您上下文中的字段不称为 isHover
和 setHover
,它们称为 currentHover
和 toggleHover
,因此要么在析构函数中使用它们,要么在析构函数中使用它们手动:
const context = useContext(HeaderHoverContext);
const isHover = context.currentHover;
const setHover = context.toggleHover;
顺便说一下,您的切换悬停有一个错误,永远不要将其设置为 false。试试这个:
const toggleHover = () => setHover(current => !current);