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";

export const UserContext = createContext();

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

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

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

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

export default App;

这是<User />:

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

function User(props) {
  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;

所以我创建了 Context 并在 <App /> 中提供它并在 .但是当我 console.log(userName); 它 returns undefined.

我是不是做错了什么？谢谢！

Answer 1

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

这条路线有问题，因为树上没有供应商。当此路由呈现时，<User> 将从 useContext(UserContext) 获取 undefined。另一条路应该没问题。

要修复此路由，请确保您的提供商位于组件树的较高位置。例如，围绕所有路线的单个供应商：

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

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

Answer 2

value = {[handleShow,user,setUser]}
**and catch like this**
const value = useContext(UserContext);
const handleShow = value[0];
const user = value[1];
const setUser = value[2];

Answer 3

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({});

  const handleShow = "testtest";

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

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

export default App;

Answer 4

这是我导入 UserContext 的方式。而不是：import UserContext from "../App"; 更改为：import { UserContext } from "../App";

useContext React - 尝试使用上下文时未定义

useContext React - Undefined when trying to consume context

reactjs

react-hooks

use-context