用ReactJS钩子更新默认的Javascript变量

Question

我想有以下，但在我的http-axios文件的工作代码:

import axios from "axios";
import {useAuthContext} from './services/useAuthContext'
const {user} = useAuthContext();
export default axios.create({
baseURL: "http://localhost:4000/api/",
headers: { 
"Content-type":"application/json",
"Authorization": `Bearer ${user.token}`
}
});

我不明白如何使我的代码工作，因为我有连续的依赖。

我称之为axios。稍后在。/services/imgs.js文件中创建导出:

import http from "../http-axios";
class VMsDataService {
getLatest(page=0){
return http.get(`vms/latest`);
}
}

我在App.js文件中使用:

import VMsDataService from "./services/vms";
VMsDataService.getLatest()
.then(response => {
//
}).catch(e => {
//
});

我的问题是。我如何重组我的代码，以便能够检索动态数据在我的axios配置，也有这个类的功能，我现在有。这里的要点是动态授权头取自useAuthContext组件

我试着把所有的东西都变成组件，但是没有成功。

Answer 1

创建可重用组件的一种方法是创建自定义钩子。

例如一个自定义钩子，它将返回用户对象并设置授权:

import axios from "axios";
import {useAuthContext} from './services/useAuthContext'
const useAxios = () => {
const {user} = useAuthContext();
return axios.create({
baseURL: "http://localhost:4000/api/",
headers: {
"Content-type": "application/json",
"Authorization": `Bearer ${user.token}`,
},
});
};
export default useAxios;

那么你可以在VMsDataService中使用这个自定义钩子。

我不习惯类组件，所以我用函数组件来写。我认为这更容易:

import React from "react";
import useAxios from "../hooks/useAxios";
const VMsDataService = () => {
const http = useAxios();
const getLatest = (page = 0) => {
return http.get(`vms/latest`);
};
return {getLatest};
};
export default VMsDataService;

希望我明白你的要求!