反应useContext返回未定义

Posted 2023-04-14

【中文标题】反应useContext返回未定义

【英文标题】：React useContext Returning Undefined

【发布时间】：2021-07-19 10:44:03

【问题描述】：

正在努力处理与功能组件一起使用的反应上下文。我觉得我在这里做的一切，所以任何帮助将不胜感激。

首先我定义一个上下文（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.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>
    )

有什么我可能在这里遗漏的想法吗？

【参考方案1】：

上下文中的字段不称为isHover 和setHover，它们称为currentHover 和toggleHover，因此要么在析构函数中使用它们，要么手动析构：

  const context = useContext(HeaderHoverContext);
  const isHover = context.currentHover;
  const setHover = context.toggleHover;

顺便说一句，您的切换悬停有一个错误，永远不要将其设置为 false。试试这个：

const toggleHover = () => setHover(current => !current);

【讨论】：

非常感谢！！没有意识到析构函数的语法是这样的