在反应中使用 useContext 时遇到问题？

Question

我有一个简单的反应应用程序，我必须在其中使用 useContext。 H2>

（顺便说一句，我使用 vite + react）

这是我的 Context.jsx 代码

import React, {useContext} from 'react';

const emailContext = React.createContext();

export const useEmail = () => useContext(emailContext);

export const emailProvider = ({children}) => {
  const currentUser = "None";

  const value = {
    currentUser
  }

  return(
    <emailContext.Provider value={value}>
      {children}
      </emailContext.Provider>
  )
}

这是我如何使用上下文

import "./styles.css";
import { useEmail } from "./Context/Context"

export default function App() {

  const {currentUser} = useEmail();

  return (
    <div className="App">
      <h1>Hello CodeSandbox {currentUser}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

我知道为什么我在这段代码中遇到错误。

我遇到的一些错误

• _useEmail 未定义（最新）
• currentUser 用户未定义

我尝试过的事情

• 用一些初始值初始化 createContext（只有初始值可见）。
• 在 App.js 中使用 useContext() 直接（useContext(emailContext) 返回未定义）
• 用<children/>代替了{children}。
• 在 emailProvider 中使用 useState 而不是 const currentUser

即使我使用 typescript 也会遇到同样的问题。

但以上都没有帮助。

Answer 1

下面的代码可以帮助你分析流程，也可以查看链接了解更多详情https://medium.com/technofunnel/usecontext-in-react-hooks-aa9a60b8a461

在接收端使用useContext

 import React, { useState } from "react";

var userDetailContext = React.createContext(null);

export default function UserDetailsComponent() {
  var [userDetails] = useState({
    name: "Mayank",
    age: 30
  });

  return (
    <userDetailContext.Provider value={userDetails}>
      <h1>This is the Parent Component</h1>
      <hr />
      <ChildComponent userDetails={userDetails} />
    </userDetailContext.Provider>
  );
}

function ChildComponent(props) {
  return (
    <div>
      <h2>This is Child Component</h2>
      <hr />
      <SubChildComponent />
    </div>
  );
}

function SubChildComponent(props) {
  var contextData = React.useContext(userDetailContext);
  return (
    <div>
      <h3>This is Sub Child Component</h3>
      <h4>User Name: {contextData.name}</h4>
      <h4>User Age: {contextData.age}</h4>
    </div>
  );
}

Answer 2

您应该使用<emailProvider></emailProvider> 包装应用程序以使用value={value} 中的数据。现在它从const emailContext = React.createContext();得到未定义