Soy realmente nuevo en reaccionar y tengo esto.
import Axios from "axios"; import { useAuth } from "react-oidc-context"; const ProductService = { getProductList: () => { return Axios({ method: "get", url: "<myurl>", headers: { "Authorization": useAuth().user?.access_token } }).then((response) => { return response.data; }).catch((error) => { console.log(error); }); }, getProduct: (productId: string) => { return Axios({ method: "get", url: "<myurl>/" + productId, headers: { "Authorization": useAuth().user?.access_token } }).then((response) => { return response.data; }).catch((error) => { console.log(error); }); }, addClient: (data: any) => { return Axios({ method: "post", url: "<myurl>", data: data, headers: { "Authorization": useAuth().user?.access_token } }).then((response) => { return response.data; }).catch((error) => { console.log(error); }); } } export default ProductService Tenga en cuenta que estoy tratando de usar useAuth() en el encabezado de Autorización y React Hook "useAuth" is called in function "getProductList" which is neither a React function component or a custom React Hook function .
En este caso, ¿cuál es la solución para poder usar useAuth() para obtener el token de usuario?
mi componente
<Button type="submit" onClick={() => { ProductService.addClient(data) .then(() => { toggleModal(); }); }}> Add </Button>Gracias
Hooks es una función que controla la gestión del estado o los métodos del ciclo de vida del componente React a través del orden registrado. Por lo tanto, los React Hooks no están disponibles fuera del componente. Consulte el enlace .
Solo ganchos de llamadas en el nivel superior. Por lo tanto, getProductList debe cambiarse de la siguiente manera.
const getProductList = (access_token) => { if (!access_token) throw new Error('No access_token'); return Axios({ method: "get", url: "<myurl>", headers: { "Authorization": access_token } }).then((response) => { return response.data; }).catch((error) => { console.log(error); }); }; const YourReactComponent = () => { const auth = useAuth(); useEffect(() => { getProductList(auth?.user?.access_token) .then(() => { /* NEXT STEP */ }) }, [auth?.user?.access_token]); return <> Component Text. </> };Según la regla de Hooks, podemos usar hooks solo de los componentes de la función React o Hooks personalizados.
En tu escenario,
Espero que esté llamando a ProductService desde un componente de reacción en particular. Obtenga el valor de autenticación de allí y páselo a ProductService.getProductList (auth)
const ProductService = { getProductList: (authToken: any) => { return Axios({ method: "get", url: "<myurl>", headers: { "Authorization": authToken } }).then((response) => { return response.data; }).catch((error) => { console.log(error); }); }, getProduct: (authToken: any, productId: string) => { return Axios({ method: "get", url: "<myurl>/" + productId, headers: { "Authorization": authToken } }).then((response) => { return response.data; }).catch((error) => { console.log(error); }); }, addClient: (authToken: any, data: any) => { return Axios({ method: "post", url: "<myurl>", data: data, headers: { "Authorization": authToken } }).then((response) => { return response.data; }).catch((error) => { console.log(error); }); } } const TestReactFunctionalComponent = () => { const auth = useAuth(); // use below calling wherever you want inside this component ProductService.getProductList(auth.user?.access_token); return( // your compoent elements ) };