1

Alguien me puede ayudar con un error que me aparece y no sé que significa ni cómo solucionarlo, se lo agradecería mucho. Este es el error que me aparece:

Uncaught TypeError: Cannot read private member #productos from an object whose class did not declare it

Y esta es la línea de código con la que me sale el error:

this.#productos.push(nuevoProducto);

Y el nuevoProducto es un elemento que intento agregar a un array en un JSON.

8
  • ¿Esta declarado #productos de antemano? ¿Puedes enseñarnos la clase? Commented el 3 ago. 2020 a las 1:25
  • 2
    Si está declarado de antemano, desde el principio export default class Productos { #productos; #formEdicion; constructor() { this.#productos = [] }
    – Wiska
    Commented el 3 ago. 2020 a las 1:43
  • Así como está no debería tirar ese error, debería tirar otro... intenta quitar el #
    – user13558
    Commented el 3 ago. 2020 a las 1:46
  • Como dice @ArtEze lo mas sencillo es que hagas la variable publica, pero según el error, estas llamando a la variable desde fuera de la clase y en este caso si ha de ser publica, eso o exponer un método publico que modifique la variable privada. Commented el 3 ago. 2020 a las 1:49
  • 1
    Te aseguro que lo pongo donde es, pero igual te muestro: guardarAdicion() { let nuevoProducto = { id: document.querySelector('#productos-adicion #identificador').value, referencia: document.querySelector('#productos-adicion #referencia').value, imagen: document.querySelectorAll('#productos-adicion #txtImagen').value } console.log(nuevoProducto); this.productos.push(nuevoProducto); }
    – Wiska
    Commented el 3 ago. 2020 a las 2:12

1 respuesta 1

1

La manera en que se está declarando la clase, con esos #, me da la sospecha que debería tirar error. Es mejor no usar el # al declarar propiedad. Lo que sí puede hacerse es usar el # en el querySelector, es decir, es una ruta CSS finalmente.

export default class Productos {
    #productos;
    #formEdicion;

Me imagino que el proyecto se trata de algo que varía la cantidad de imágenes, y el usuario tiene que cambiar valores.

El problema está aquí:

imagen: document.querySelectorAll('#productos-adicion #txtImagen').value

Se está intentando devolver el valor de una lista de imágenes, es decir, no los valores de una lista, sino el valor de una lista.

Pero además el querySelectorAll no devuelve un array, en vez de eso devuelve una colección, que para procesarla hay que convertirla a array.

Para lograr esto, se hace de la siguiente manera:

var valores = [...document.querySelectorAll('#txtImagen')].map(x=>{
    return x.value
})

Para un solo txtImagen se está usando el atributo HTML id, y en el querySelector se accede con #, pero como hay más de uno, hay que usar el atributo HTML class y en el querySelector usar un ..

[...document.querySelectorAll('.txtImagen')]

Para el botón de Guardar Adición, al hacer click, llamo a una función anónima que llama al método guardarAdicion, y en vez de un onclick en el HTML, hago un addEventListener en JavaScript.

document.querySelector("#productos-adicion #guardarAdicion")
.addEventListener("click",()=>window.productos.guardarAdicion())

Si llamo normalmente al método, no funciona, para eso necesito una función anónima. Es decir, lo siguiente trae problemas.

.addEventListener("click",window.productos.guardarAdicion)

En cambio, al usar la función anónima ()=>, anda bien:

.addEventListener("click",()=>window.productos.guardarAdicion())

Código completo:

class Productos {
  constructor() {
    this.productos = []
  }
  guardarAdicion() {
    let nuevoProducto = {}
    var valores = [["id","identificador"],
    ["referencia","referencia"],
    ["imágenes","txtImagen"]].map(function(x){
      nuevoProducto[x[0]] = [
        ...document.querySelectorAll(
          `#productos-adicion .${x[1]}`
        )
      ].map(x=>x.value)
      if(nuevoProducto[x[0]].length<2){
        nuevoProducto[x[0]] = nuevoProducto[x[0]][0]
      }
    })
    var div = document.createElement("div")
    div.innerHTML = JSON.stringify(nuevoProducto)
    document.querySelector("#resultado").appendChild(div)
    this.productos.push(nuevoProducto)
  }
}
window.productos = new Productos()

document.querySelector("#productos-adicion #guardarAdicion")
.addEventListener("click",()=>window.productos.guardarAdicion())

document.querySelector("#productos-adicion #cantidadImagenes")
.addEventListener("keyup",function(x){
  var imagenes = document.querySelector("#productos-adicion #imagenes")
  var cantidad = + x.target.value
  var i = 1
  imagenes.innerHTML = ""
  var dentro = [...Array(cantidad)].map(()=>{
    var div = document.createElement("div")
    var input = document.createElement("input")
    input.className = "txtImagen"
    div.innerHTML = `Imagen ${i}: `
    div.appendChild(input)
    imagenes.appendChild(div)
    ++i
  })
})
<div id="productos-adicion">
  <div>Cantidad de imágenes: 
    <input id="cantidadImagenes" />
    <button id="guardarAdicion">Guardar Adición</button>
  </div>
  <table border="1">
    <tr>
      <td>
        <div>Identificador: <input class="identificador"/></div>
        <div>Referencia: <input class="referencia"/></div>
        <div id="imagenes">
          <div>Imagen 1: <input class="txtImagen"/></div>
          <div>Imagen 2: <input class="txtImagen"/></div>
        </div>
      </td>
      <td>
        <div id="resultado"></div>
      </td>
    </tr>
  </table>
</div>

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.