如何在 React 的组件范围之外使用 React 的上下文 API：ReactJS答案

【问题标题】：How to use React's context API outside of react's component scope : ReactJS如何在 React 的组件范围之外使用 React 的上下文 API：ReactJS
【发布时间】：2019-08-19 06:51:43
【问题描述】：

我正在使用 react 的上下文 API 来存储 USER_TOKEN 以进行身份验证。

我还在一个单独的模块中维护一个通用的获取函数，我想在其中使用这个 USER_TOKEN。

很明显，我不能在这个模块中使用这个 USER_TOKEN，因为它不是一个反应组件。

有什么方法可以在这个 fetch 函数中使用这个 USER_TOKEN。

成功登录后，我将 USER_TOKEN 存储到上下文 API 变量中。是的，我知道我们可以在调用此函数时从上下文中传递变量。但问题是，未来的任何变化都必须在所有地方都发生变化。所以我想知道是否只有一个地方可以做到这一点。基本上，这个想法是将这个令牌与所有 API 请求一起发送，因此尽量保持一个公共位置。

我们将不胜感激

获取模块


export module FetchModule {
  export async function fetch(obj: any) {
    let url = obj.url;
    let type = obj.type ? obj.type.toUpperCase() : "GET";
    let options: any = {};
    options.method = type;
    let idToken = obj.token;// Want to retrieve this USER_TOKEN from react's context API 
    if (idToken) {
      options.headers["USER_TOKEN"] = idToken;
    }
    options.headers = { ...options.headers, ...obj.headers };
    const response = await fetch(url, options);
    return await response.json();
  }
}

【问题讨论】：

一种方法是将令牌存储在本地/会话存储中（取决于要求）并在您需要的任何地方获取其价值
@AdamKosmala 希望避免本地/会话存储！还有什么办法吗？
现在想不出什么不是肮脏的解决方案。有什么理由不使用浏览器存储？
您需要从调用 fetch 函数的位置传递令牌
您可以有一个单例类实例，您可以在其中存储值并公开一个函数来获取它。您可以使用它在应用程序中的任何位置获取价值。如果将其存储在上下文中以导致重新渲染，则可以同时更新类实例和上下文中的值

标签： javascript reactjs es6-modules setstate react-context

【解决方案1】：

在 src/components 文件夹中创建一个名为：Context 的文件夹
在您创建的这个文件夹（上下文）中创建一个名为 index.js 的文件
在 index.js 文件中写入：

import React, { Component } from 'react';

const AppContext = React.createContext();

export class Provider extends Component {


  state = {
    
      token: ''
    
  };
  
  setToken = (token) => {
  
    this.state.token = token;
    this.setState();
  
  };
  
  render() {
  
    return (
      
        <AppContext.Provider value = {{ 
    
                token: this.state.token,
                actions: {
                  setToken: this.setToken
                }

        }}>
    
        {this.props.children}
      </AppContext.Provider>
  
      );
    
  
  }

}

exoprt const Consumer = AppContext.Consumer;
export const AppContextObject = AppContext;

在 src/index.js 中：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "./compomemts/Context/";
import App from './App';

ReactDOM.render(
    <Provider>
        <App  />
    </Provider>
    , document.getElementById("root")
);

假设你有登录组件，在里面写下：

import React, { PureComponent } from 'react';
import { Consumer, AppContextObject } from "../Context";

class Login extends PureComponent { 



render() {

  return (
  
    <Consumer>
      {(actions, token) => (
      
        <button className="enter" id="enter-id" onClick={(event) => {
          if(token === undifined) {
            newToken = 'get the token from your system';
            actions.setToken(newToken);
          }
          
        }} >
                                connect
                            </button>
      
      )}
    </Consumer>

  )

}



}

Login.contextType = AppContextObject; // This part is important to access context values

SuperAdminContextObject

【讨论】：