useContext React 未定义

Question

我正在尝试构建一个简单的 React 应用程序，并将一些 CRUD 连接到 Rails API。项目的结构是这样的：

App.js
 -> UserIndex
   --> Form
   --> User
 -> User

我想从 <App /> 发送一个值（函数）给它的孙子（不是直系子）<User />。

这是<App />:

import "./App.css";
import User from "./components/User";
import UserIndex from "./components/UserIndex";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useState, createContext } from "react";

function App() {
  const [user, setUser] = useState({});
  const UserContext = createContext();

  function handleShow() {
    console.log("showed!");
  }

  return (
    <div>
      <BrowserRouter>
        <Routes>
          <UserContext.Provider value={handleShow}>
            <Route path="/" element={<UserIndex />}></Route>
          </UserContext.Provider>
          <Route
            path="users/:userId"
            element={<User id={user.id} name={user.name} email={user.email} />}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

我导入了 CreateContext 并创建了它，还提供了 UserContext.Provider。

这是 <User />:

import React, { useContext } from "react";
import { Link } from "@mui/material";
import axios from "axios";

function User(props) {
  const userName = useContext(UserContext);
  return (
    <div className="centerText">
      <Link
        href={`/users/${props.id}`}
        color="inherit"
        onClick={props.handleShow}
      >
        <h4>{props.name}</h4>
        <h4>{props.email}</h4>
      </Link>
      {props.deleteData && <button onClick={props.deleteData}>Delete</button>}
    </div>
  );
}

export default User;

我导入了 useContext，我正在尝试获取我提供的 UserContext，但它不起作用。它说：userContext is not defined.

也试过像这样在 UserContext.Provider 上包装所有东西：

<BrowserRouter>
        <Routes>
          <UserContext.Provider value={handleShow}>
            <Route path="/" element={<UserIndex />}></Route>

            <Route
              path="users/:userId"
              element={
                <User id={user.id} name={user.name} email={user.email} />
              }
            />
          </UserContext.Provider>
        </Routes>
      </BrowserRouter>

但是也没用。我在 Internet 上搜索但所有示例都在同一个 .js 文件中，因此获取 UserContext

没有问题

我做错了什么？谢谢！

编辑：

经过更正后，这是现在的样子。

import "./App.css";
import User from "./components/User";
import UserIndex from "./components/UserIndex";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { useState, createContext } from "react";

export const UserContext = createContext();

function App() {
  const [user, setUser] = useState({});

  // function handleShow() {
  //   console.log("showed!");
  // }
  const handleShow = "fñalksdjfñdlskfjds";

  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route
            path="/"
            element={
              <UserContext.Provider value={handleShow}>
                <UserIndex />
              </UserContext.Provider>
            }
          ></Route>

          <Route
            path="users/:userId"
            element={<User id={1} name={"hey"} email={"there"} />}
          />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

import React, { useContext } from "react";
import { Link } from "@mui/material";
import axios from "axios";
import UserContext from "../App";

function User(props) {
  console.log(UserContext);
  const userName = useContext(UserContext);

  console.log(userName);

  return (
    <div className="centerText">
      <Link
        href={`/users/${props.id}`}
        color="inherit"
        onClick={props.handleShow}
      >
        <h4>{props.name}</h4>
        <h4>{props.email}</h4>
      </Link>
      {props.deleteData && <button onClick={props.deleteData}>Delete</button>}
    </div>
  );
}

export default User;

Answer 1

在 App 外声明和导出 UserContext。

export const UserContext = createContext();

function App() {
...

然后

import { UserContext } from '/App';

useContext React 未定义

useContext React not defined

reactjs

react-hooks

use-context