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

Question

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

（顺便说一句，我正在使用 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) return 未定义）
而不是 {children} 使用 <children/>。
在 emailProvider

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

但上述 none 有帮助。

Answer 1

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

变得未定义

Answer 2

下面的代码可以帮助您分析流程，另请查看 link 以获取更多详细信息 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>
  );
}

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

getting problem on using useContext in react?

javascript

typescript

reactjs

use-context

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

我遇到的一些错误

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