En mi aplicación de reacción, estoy definiendo una clase Axios con un montón de métodos, pero los métodos no se reconocen como funciones y arrojan un error. Mostrar es más fácil que explicar así que... tengo 3 archivos involucrados...
http-common.js tiene esto:
import axios from 'axios'; export default axios.create({ baseURL: "http://localhost:5000/api/v1/tours", headers: { "Content-type": "application/json" } });tours.js tiene esto:
import http from "../http-common"; class ToursDataService { getAll(page = 0) { return http.get(`?page=${page}`); } } export default ToursDataServicetours-list.js tiene esto... que llama a la función "getAll" en retrieveTours.
import React, { useState, useEffect } from "react"; import ToursDataService from "../services/tours"; const ToursList = props => { const [tours, setTours] = useState([]); useEffect(() => { retrieveTours(); }, []); const retrieveTours = () => { ToursDataService.getAll() .then(response => { setTours(response.data.tours) }) .catch( e => { console.log(e); }); }La consola afirma que getAll no es una función. ¿Por qué? ¿Alguien puede explicar?
scheduler.development.js:173 Uncaught TypeError: _services_tours__WEBPACK_IMPORTED_MODULE_1__.default.getAll is not a function at retrieveTours (tour-list.js:12:1)getAll() no es un método estático, por lo que deberá crear una instancia de ToursDataService ...
const svc = new ToursDataService(); // create an instance // ... svc.getAll() // call the method on the instance .then(...)o hacer que el método sea estático
class ToursDataService { static getAll(page = 0) { return http.get("", { params: { page } }); } } Alternativamente, no use clases en absoluto ya que no parece estar encapsulando nada. También podría exportar la función getAll por sí sola
// tours.js export const getAll = (page = 0) => http.get("", { params: { page } });y
import { getAll } from "../services/tours";