如何在 react-router-dom 中使用 context api": "^5.2.0" 和 react": "^17.0.2"

Posted 2023-04-14

【中文标题】如何在 react-router-dom 中使用 context api": "^5.2.0" 和 react": "^17.0.2"

【英文标题】：How to use context api with react-router-dom": "^5.2.0" and react": "^17.0.2"

【发布时间】：2021-07-30 16:11:54

【问题描述】：

我正在尝试使用 Context API 从我的 Header 组件访问用户值，但它给了我未定义的信息。 这是我的代码。

import React,  createContext, useEffect, useState  from "react";

export const DashboardContext = createContext();

const AppContextProvider = ( children ) => 
  const userInitialState = localStorage.getItem("user") || "";

  const [user, setUser] = useState(userInitialState);

  useEffect(() => 
    localStorage.setItem("user", user);
  , [user]);

  const values = 
    user,
    setUser
  ;

  return (
    <DashboardContext.Provider value=values>
      children
    </DashboardContext.Provider>
  );
;

export default AppContextProvider;

在应用组件中：

import  BrowserRouter as Router, Switch, Route  from "react-router-dom";
import AppContextProvider from "./contexts/AppContext";
import Products from "./views/Products";
import Orders from "./views/Orders";
    <AppContextProvider>
       <Router>
         <Header />
         <Switch>
                <Route path="/products">
                  <Products />
                </Route>
                <Route path="/orders">
                  <Orders/>
                </Route>
              </Switch>
    </AppContextProvider>

标题组件：

import React,  useContext  from "react";
import AppContextProvider from "../contexts/AppContextProvider";
import "../styles/Header.css";

const Header = () => 
  const context = useContext(AppContextProvider);
  console.log(context); // gives me undefined
return (
    <div className="row border-bottom text-white">
user
</div>
;

export default Header;

在 Header 组件内部，我尝试访问用户值，但它给了我未定义 我该如何解决这个问题，因为我是新手。 请帮忙。 ..................................................... ....................

【问题讨论】：

你能包含你的 Header 组件吗？

我编辑了问题，添加了 Header 组件

【参考方案1】：

您在 Header 组件中未定义的原因是您使用了错误的变量来访问 Context。

您需要使用实际的上下文值，而不是您设置的 Provider。您需要改用const context = useContext(DashboardContext)，它会起作用。

const  createContext, useEffect, useState, useContext  = React;

const DashboardContext = createContext();

const AppContextProvider = ( children ) => 
  const userInitialState = "You" || "";

  const [user, setUser] = useState(userInitialState);

  useEffect(() => 
    console.log(`store: "$user" to localstorage`);
  , [user]);

  const values = 
    user,
    setUser,
  ;

  return (
    <DashboardContext.Provider value=values>
      children
    </DashboardContext.Provider>
  );
;

const Header = () => 
  const  user, setUser  = useContext(DashboardContext);
  const changeUserName = (event) => 
    event.preventDefault();
    const data = new FormData(event.target);
    setUser(data.get("user"));
  ;
  return (
    <div>
      <div>Welcome user!</div>
      <div>
        <form onSubmit=changeUserName>
          <input name="user" />
          <button type="submit">Update Name</button>
        </form>
      </div>
    </div>
  );
;

const App = () => (
  <AppContextProvider>
    <Header />
  </AppContextProvider>
);

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"/>

【讨论】：

非常感谢。