反应useContext返回未定义答案

【问题标题】：React useContext Returning Undefined反应useContext返回未定义
【发布时间】：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>
    )
}

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

【问题讨论】：

标签： javascript reactjs react-hooks react-context use-context

【解决方案1】：

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

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

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

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

【讨论】：

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