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正在从安装程序返回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挂钩时，它正在子组件中创建重复的上下文。由于我正在使用它进行组件验证，因此在子组件中可以访问方法将很有帮助，因此我可以根据用户访问权限等返回它的不同部分。

是否可以在不实例化子组件内部新上下文的情况下访问全局上下文？我使用的是我遵循的教程中的上下文模板，尽管我了解useContext的概念，但这里似乎缺少关键组件。

Answer 1

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

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

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

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

Answer 2

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

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

2 个答案: