1

我对 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 的概念，但我似乎在这里缺少一个关键组件。

4

2 回答 2

1

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

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

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

function App() {
  return (
    <AuthContext>
      <AuthState>
        {/* ... */}
      </AuthState>
    </AuthContext>
  );
}
于 2020-08-18T17:59:27.000 回答
0

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

于 2020-08-19T19:30:47.297 回答