Javascript 如何从 Provider 共享数据到函数 react

发布于09月30日

我已经创建了一个NPM库，它共享多个util函数.其中之一就是给我们的终端打电话.我已经在我的NPM库中包含了Axios，但我无法在全局设置Axios.create个实例.

我最初以为我可以创建一个Provider并设置一个context，但是，因为我的API函数不在钩子中，所以我无法访问上下文.这是我第一个如此不熟悉什么是最佳实践的NPM库.

// Provider.ts

export default function Provider({ children, config }: ProviderProps) {
  window.config = config;
  return (
    <ContextConfig.Provider value={config}>{children}</ContextConfig.Provider>
  );
}

在上面，我try 使用上下文API、设置全局变量等.

// api.ts

import Axios, { AxiosInstance, AxiosPromise, Cancel } from 'axios';

const axiosInstance = Axios.create(window.config);

const api = (axios: AxiosInstance) => ({
  get: <T>(url: string, config: ApiRequestConfig = {}) =>
    withLogger<T>(withAbort<T>(axios.get)(url, config)),
});

export default api(axiosInstance)

上图中，试图使用全局变量window.config，但它是undefined.我还try 将导出转换为挂钩以允许读取上下文，但遇到了有关挂钩不安全使用的错误.

// index.ts

import api from './api';
import Provider from './Provider';

export { api, Provider };

我现在唯一能想到处理这一问题的方法是使用本地存储，这是非常开放的建议.

干杯

// api.ts import Axios, { AxiosInstance, AxiosPromise, Cancel } from 'axios'; const api = (axios: AxiosInstance) => ({ get: <T>(url: string, config: ApiRequestConfig = {}) => withLogger<T>(withAbort<T>(axios.get)(url, config)), }); export default () => { const axiosInstance = Axios.create(window.config); return api(axiosInstance) }

Javascript 如何从 Provider 共享数据到函数 react

推荐答案

Javascript相关问答推荐

如何使用侧边滚动按钮具体滚动每4个格？

在页面上滚动 timeshift 动垂直滚动条

Chart.js V4切换图表中的每个条，同时每个条下有不同的标签.怎么做？

使用LocaleCompare()进行排序时，首先使用大写字母

Next.js服务器端组件请求，如何发送我的cookie token？

Eval vs函数()返回语义

让chart.js饼图中的一个切片变厚？

VSCode中出现随机行

在VS代码上一次设置多个变量格式

无法读取未定义的属性(正在读取合并)-react RTK

当我点击一个按钮后按回车键时，如何阻止它再次被点击

Jexl to LowerCase()和Replace()

计算对象数组中属性的滚动增量

不允许在对象文本中注释掉的属性

如何格式化API的响应

如何使用Angular JS双击按钮

我如何让我的弹力球在JavaScript和HTML画布中相互碰撞后改变 colored颜色？

使用Firebase实时数据库`update`在同一 node 上执行多个更新

为什么Reaction useEffect函数会将控制台日志(log)呈现两次

在两个数组范围中输入日期范围