0

Estoy teniendo un problema, funciona correctamente en la primera llamada a Paginator el problema es al volver a llamarla en un cambio de pagina.

Clase Paginator

const Paginator = {
  constructor() {
    this.data = [];
  },
  data(data) {
    this.data = data;
    return this;
  },
  page(number) {
    this.page = number;
    this.data = this.data[number - 1];
    return this;
  },
}

export default Paginator;

Import

import Paginator from '../../helpers/Paginator';

Llamada

const paginate = Paginator
        .data(challenges)
        .page(page);

      const { data } = paginate;

cuando intento cambiar a .page(2) me arroja lo siguiente

TypeError: _helpers_Paginator__WEBPACK_IMPORTED_MODULE_6__.default.data is not a function
7
  • 1
    Ahí parece que data es un arreglo y luego tratas de invocarlo como función
    – user128299
    Commented el 6 jul. 2020 a las 1:42
  • @BetaM se me olvidaba agregar esa parte de código, listo.
    – DoubleM
    Commented el 6 jul. 2020 a las 1:44
  • Porque no simplemente usar new? tengo entendido que se puede, es tan sencillo como usar new, es mas, actualmente en ES6, ya hay clases, genericas pero hacen la misma funcion.
    – Layer
    Commented el 6 jul. 2020 a las 2:40
  • Hola @Riven he utilizado export default new Paginator(); y me arroja el mismo error.
    – DoubleM
    Commented el 6 jul. 2020 a las 2:51
  • 1
    usar new para un export no tiene sentido con new me referia era a usarlo en una variable o constante, por ejemplo const pag = new Paginator(); pero deberias pasar eso a una class, porque como tal no tienes una class de ES6 si no un Object, Paginator deberia ser una class, el constructor que tienes no hace las vecez de constructor realmente asi como lo tienes.
    – Layer
    Commented el 6 jul. 2020 a las 2:58

1 respuesta 1

1

He convertido tu codigo a estandares de ES6, son muchas cosas que explicar, asi que en su lugar dejare una referencia acerca de las clases de ES6, que te ayudaran a entender de manera mas detallada y mejor los cambios que he hecho:

//Archivo donde exportas la clase
export default class Paginator{
  constructor() {
    this.data = [];
    this.page = 0;
  }
  
  data(data) {
    this.data = data;
  }
  
  page(number) {
    this.page = number;
    this.data = this.data[number - 1];
  }
}

//Archivo donde importas la clase
//import Paginator from '../../helpers/Paginator';

const paginate = new Paginator();
paginate.data(challenges)
paginate.page(page);

//NO DEBES HACER ESTO, SIMPLEMENTE ES REDUNDANTE Y ERRONEO
//No le puedes hacer destructuring a una clase de esta manera.
//const { data } = paginate;

//En su lugar simplemente crea otra instancia y usala:
const pagi = new Paginator();

Enlace hacia la documentación de las clases de ES6:

Clases

creo que la confusion mas grande que tienes es que haz pensado que un objeto en javascript es la instancia de una clase, que en si es correcto, pero entonces al tener el objeto te sobra retornar los this, puesto que en teoria ya tendrias guardada la instancia al crearla (el objeto), asi que estos return sobran y solo darian posibles errores, this y la instancia del objeto son lo mismo:

data(data) {
  this.data = data;
  return this;      //Sobra
},
page(number) {
  this.page = number;
  this.data = this.data[number - 1];
  return this;      //Sobra
}
3
  • PD: puedes obtener la longitud de un array usando la propiedad length, por si depronto lo necesitas, por ejemplo para obtener la cantidad de datos contenidos en this.data, seria this.data.length.
    – Layer
    Commented el 6 jul. 2020 a las 3:26
  • Ahhh un punto curioso que se me olvido mencionar, estas entrando en un conflicto de nombres, si te fijas data es una propiedad de la clase, pero a la vez hay un metodo llamado data, por lo tanto habra un conflicto de nombres, debes asegurarte de cambiarle el nombre a data() por otra cosa, para que no entre en conflicto con tu propiedad data, o hacer del metodo data un setter.
    – Layer
    Commented el 6 jul. 2020 a las 3:42
  • recuerda que si mi respuesta te ayudo puedes darla como aceptada, y tanto la persona que pregunto como la persona que respondio ganaran puntos.
    – Layer
    Commented el 6 jul. 2020 a las 4:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.