reactjs - 无法从上下文中解构对象的属性

Question

由于一个新问题，重新发布了一个与我上次类似的问题。我正在尝试使用带有钩子(Hook)的上下文来管理我的 react 应用程序中的身份验证。我收到错误 TypeError: Cannot destructure property 'isAuthenticated' of 'Object(...)(...)' as it is undefined. , 然而当我 console.log定义它的属性，我看到 false不是 undefined .

我在 authContext.js 中有上下文定义和提供程序

import React, { useState, useEffect, createContext } from "react";
import axios from "axios";

const AuthContext = createContext();
export { AuthContext };

const AuthContextProvider = (props) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const setAuth = (boolean) => {
    setIsAuthenticated(boolean);
  };

  const apiOptions = {
    url: "users/is-verified",
    method: "GET",
    headers: {
      token: localStorage.token,
    },
  };

  function isAuth() {
    axios(apiOptions)
      .then((response) => {
        console.log("auth ran");
        const resData = response.data;
        resData === true ? setIsAuthenticated(true) : setIsAuthenticated(false);
      })
      .catch((error) => {
        console.log(error.response);
      });
  }

  useEffect(() => {
    isAuth();
  }, []);
  console.log(isAuthenticated);
  return (
    <AuthContext.Provider
      value={{ isAuthenticated, setIsAuthenticated, setAuth }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContextProvider;

然后我将我的路线包裹在 app.js 中的提供程序中

import React from "react";
import {
  Switch,
  Route,
} from "react-router-dom";
import "./App.css";
import Register from "./components/pages/register";
import AuthContextProvider from "./components/context/authContext";
import RegisterRoutes from "./components/routing/registerRoutes";

function App() {

  return (
    <AuthContextProvider>
      <div className="App h-100 ">
        <Switch>
          <Route
            exact
            path="/register"
            render={(props) => (
              <RegisterRoutes {...props} />
            )}
          />
        </Switch>
      </div>
    </AuthContextProvider>
  );
}

export default App;

然后我有一个 RegisterRoutes根据 isAuthenticated 返回两个页面之一的组件值(value)

import React, { useContext } from "react";
import AuthContext from "../context/authContext";
import { Redirect } from "react-router-dom";
import Register from "../pages/register";

function RegisterRoutes(props) {
  const { isAuthenticated, setAuth } = useContext(AuthContext);
  console.log(isAuthenticated);

  return !isAuthenticated ? (
    <Register {...props} setAuth={setAuth} />
  ) : (
    <Redirect to="/login" />
  );
}

export default RegisterRoutes;

Answer 1

您的默认导出是 AuthContextProvider(一个组件)，而不是 AuthContext(一个上下文对象):这不会像您期望的那样工作。此外，您正在尝试将上下文对象导出到另一个对象中:

// WRONG: export context inside {}
const AuthContext = createContext();
export { AuthContext };

解决方案一

而是正常导出上下文变量(不是默认值):

// Export the variable
export const AuthContext = createContext();

// This works
import { AuthContext } from "../context/authContext";

方案二(推荐)

更好的做法是将上下文保存在单独的文件中并将其导出为默认值:

// File AuthContext.js

import React, { createContext } from "react";

const AuthContext = createContext();

export default AuthContext;

// Import it in another file
import AuthContext from "./AuthContext.js";