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

Question

我正在尝试使用 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 组件内部，我尝试访问用户值，但它给了我未定义 我该如何解决这个问题，因为我是新手。 请帮忙。 ..................................................... ....................

Answer 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"/>