使用 useContext 挂钩全局响应上下文

Question

我对 useContext 挂钩应该如何在“全局”状态下工作感到有点困惑。

这是我的 App.js:

import React from 'react';
import Login from './Components/auth/Login';
import './App.css';
import AuthState from './Context/auth/AuthState';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Dashboard from './Components/dashboard/DashBoard';
import CollectionState from './Context/collection/CollectionState';
import Collection from './Components/collection/Collection';
import PrivateRoute from './routing/PrivateRoute';
import AddCollectionItem from './Components/collection/AddCollectionItem';
import AddUser from './Components/Users/AddUser';
import Settings from './Components/admin/Settings';

function App() {
  return (
    <AuthState>
</AuthState>

下面是我的一个子组件的导入和设置语句：

import React, { useContext, useEffect } from 'react';
import { Route, Redirect } from 'react-router-dom';
import AuthContext from '../Context/auth/authContext';
import Loading from '../utils/Loading';
import Can from '../Components/auth/Can';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const authContext = useContext(AuthContext);
  const { isAuthenticated, loading, user } = authContext;
  const { type, perform } = rest;
  useEffect(() => {
    authContext.loadUser();
    // eslint-disable-next-line
  }, []);

我的 AuthContext 正在 returning AuthContext.Provider 设置。

 <AuthContext.Provider
      value={{
        token: state.token,
        isAuthenticated: state.isAuthenticated,
        loading: state.loading,
        user: state.user,
        error: state.error,
        register,
        loadUser,
        login,
        logout,
        clearErrors,
      }}
    >
      {props.children}
    </AuthContext.Provider>
  );
};

基本上 - 我使用 AuthContext 为组件提供基本的前端验证，然后使用后端验证该验证。

问题是当我在子组件中使用 useContext 挂钩时，它会在子组件中创建重复的上下文。由于我将其用于组件验证，因此在子组件中访问这些方法会很有帮助，因此我可以 return 根据用户访问等 return 它的不同部分

有没有办法在不在子组件中实例化新上下文的情况下访问全局上下文？我正在使用我遵循的教程中的这个上下文模板，虽然我理解 useContext 的概念，但我似乎在这里缺少一个关键组件。

Answer 1

为了从“全局”上下文中读取数据，您需要在 Provider 实例下。如果您不是，则在子组件中使用上下文将创建该上下文的新实例，并且 return 您将使用它的默认数据。

我在这里做一个假设，因为我不知道你的整个组件树，但是：看起来你没有在上下文提供程序中包装你的应用程序。所以你可能想要这样的东西：

import AuthContext from '../Context/auth/authContext';

function App() {
  return (
    <AuthContext>
      <AuthState>
        {/* ... */}
      </AuthState>
    </AuthContext>
  );
}

Answer 2

我想我真的想出了我的问题。我正在使用 useContext 挂钩，根据文档，它是使用 context.consumer 的替代方法。我的 Authstate 组件实际上返回 AuthContext.Provider 作为子组件，所以它有点隐藏在我的代码中，但似乎已经处理好了。非常感谢您花时间和精力回答。

使用 useContext 挂钩全局响应上下文

React Context Globally with useContext hook

javascript

reactjs

use-context