useContextReact-嘗試使用背景關系時未定義

我正在嘗試構建一個簡單的 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);回傳時undefined。

難道我做錯了什么？謝謝！

uj5u.com熱心網友回復：

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

這條路線有問題，因為樹上沒有提供者。當這條路線渲染時，<User>將從. 其他路線應該沒問題。undefineduseContext(UserContext)

要修復此路由，請確保您的提供程式位于組件樹的較高位置。例如，圍繞所有路由的單個提供程式：

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

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

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;

uj5u.com熱心網友回復：

這是我匯入UserContext. 而不是：import UserContext from "../App"; 更改為：import { UserContext } from "../App";

標籤：反应 反应钩子 使用上下文

上一篇：ReactRedux-Toolkit：無效的鉤子呼叫-只能在函陣列件的主體內部呼叫鉤子

下一篇：Reactv18在沒有代碼更改的情況下導致錯誤，JSX不再被接受？