Javascript 如何使用React'；在react'之外的s上下文API；s组件范围：ReactJS

我正在使用react的上下文API存储用户令牌以进行身份验证

另外，我在一个单独的模块中维护一个公共的fetch函数，我想在其中使用这个USER_令牌

很明显，我不能在这个模块中使用这个USER_令牌，因为它不是react组件

是否有任何方法可以在这个fetch函数中使用这个USER\u令牌

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

我们将不胜感激

提取模块

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

import React，{Component}来自'React'；
const AppContext=React.createContext（）；
导出类提供程序扩展组件{
状态={
令牌：“”
};
setToken=（令牌）=>{
this.state.token=令牌；
this.setState（）；
};
render（）{
返回(
{this.props.children}
);
}
}
exoprt const Consumer=AppContext.Consumer；
导出常量AppContextObject=AppContext一种方法是将令牌存储在本地/会话存储中（取决于需求），并在您需要的任何地方获取其值it@AdamKosmala希望避免本地/会话存储！还有别的办法吗？现在想不出任何不肮脏的解决方案。为什么不使用浏览器存储？您需要传递从何处调用fetch函数的令牌。您可以拥有一个单例类实例，在其中存储值并公开一个函数来获取它。您可以使用它在应用程序中的任何位置获取值。如果将其存储在上下文中以导致重新渲染，则可以同时更新类实例和上下文中的值

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();
  }
}