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

Question

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

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

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

有什么方法可以在这个 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();
  }
}

Answer 1

在 src/components 文件夹中创建一个名为：Context 的文件夹
在您创建的这个文件夹中 (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

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

How to use React's context API outside of react's component scope : ReactJS

javascript

setstate

reactjs

es6-modules

react-context

获取模块