javascript - React useContext 返回未定义

Question

努力处理与功能组件一起使用的 react 上下文。我觉得我所做的一切都在这里，因此我们将不胜感激。

首先我定义一个上下文(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 钩子(Hook)检索上下文，但遗憾的是它未定义。

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>
    )
}

有什么想法我可能会在这里错过吗？

Answer 1

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

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

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

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