0

tengo un proyecto en react, donde creo una tabla mediante los elementos de un arreglo.

Todo eso funciona bien el problema que estoy teniendo es al momento de querer eliminar un renglón de la tabla mediante un botón cuando tengo dos renglones en la tabla.

Cuando elimino el primer elemento actúa como si se utilizara la función Pop del arreglo, aunque yo realice un splice. ahora eh intentado imprimir el arreglo al momento de eliminar el elemento y si se elimina del arreglo, puesto que me imprime que solo quedo el segundo elemento pero en la vista se elimina el segundo renglón de la tabla y queda el primero que es el que elimine.

También lo eh intentado de diferentes formas, recorriendo el arreglo y por cada elemento valido si la clave del objeto es diferente a la clave del elemento que quiero eliminar, si es diferente entonces agrego ese elemento a un arreglo temporal y después de finalizar el recorrido, limpio el arreglo principal con length = 0 y le asigno el arreglo temporal al principal, pero me hace lo mismo actúa como si se realizar un pop

Ademas agrego los enlaces al github por si no me doy a entender correctamente cabe mencionar que son dos proyectos por separado el front-end y back-end por si quieren hacer las pruebas o si identifican que probablemente este manejando mal las los props que mando a otros componentes.

Front-end https://github.com/FelipeArturo/Vendimia.git

Back-end https://github.com/FelipeArturo/BackEndLaVendimia.git

 onClickEliminarArticulo(objArticulo){
    console.log("Articulo que recibe el metodo");
    console.log(objArticulo);
    /** Variables de contenedor */
    var arrArticulosSeleccionados = [];
    /** Se recorre el arreglo de elementos seleccionados */
    for(var i = 0; i < this.state.listadoArticulosSeleccionados.length; i++){
        var articuloSelecc = this.state.listadoArticulosSeleccionados[i];
        console.log("Articulo que se obtiene del arreglo");
        console.log(articuloSelecc);
        /** Validacion para determinar si es el mismo articulo a eliminar */
        if(objArticulo.clavearticulo !== articuloSelecc.clavearticulo){
            arrArticulosSeleccionados.push(articuloSelecc);
        }
        console.log("Arreglo temporal de guardado");
        console.log(arrArticulosSeleccionados);
    }
    /** Se limpia el arreglo que contiene los articulos selecionados */
    this.state.listadoArticulosSeleccionados.length = 0;
    console.log("Articulos en el arreglo despues de limpiar");
    console.log(this.state.listadoArticulosSeleccionados);

    console.log("Articulos en el arreglo temporal antes de guardar en el arreglo anterior");
    console.log(arrArticulosSeleccionados);
    /** Se agrega el arreglo que contiene los articulos que no se eliminaron del listado de articulos seleccionados */
    this.state.listadoArticulosSeleccionados = arrArticulosSeleccionados;
    console.log("Articulos en el arreglo despues de asignar el nuevo arreglo");
    console.log(this.state.listadoArticulosSeleccionados);
    /** Se realiza la resta del articulo eliminado */
    this.calcularInfTotalEngancheBonificacion(); 
}

Tabla que se llena con los artículos que se seleccionan

Impresiones del arreglo principal y el arreglo de prueba

Tabla final después de eliminar el primer articulo

2
  • Muestra tu código. Así estamos a ciegas.
    – gugadev
    Commented el 16 feb. 2020 a las 14:50
  • @gugadev edite la pregunta y agregue la porción del código donde manejo la eliminación de los elementos del arreglo, así como imágenes de como se realiza todo desde la vista y lo que imprime. Commented el 16 feb. 2020 a las 23:12

2 respuestas 2

1

En tu código veo problemas tanto de planteamiento del problema como de conceptos básicos sobre como se actualiza el estado de un componente.

El estado de react es inmutable, eso quiere decir que no puedes hacer modificaciones directas sobre el, se tiene que hacer una copia de la propiedad que vas a modificar.

Por ejemplo este código:

//Mal
this.state.name = 'stackoverflow'

Aun que estemos cambiado el estado del componente no veremos ningún cambio reflejado, para eso deberíamos usar setState

La solución a tu problema o al menos la forma que yo elegiría seria la siguiente:

Al crear el botón de eliminar asignarle el evento onClick y pasar a la función el id o alguna propiedad única para identificar el objeto que quieres eliminar.

<button onClick={() => this.delete(item.id)}>Eliminar</button>

De esta manera puedes hacer uso del metodo filter para eliminar.

const filtredData = this.state.items.filter(item => item.id !== itemId);

Esto nos crear un nuevo array con los datos filtrados y lo unico que deberiamos hacer es actualizar el estado usando el metodo setState

this.setState({ items: filtredData  })

Dicho esto te he hecho un ejemplo parecido al tuyo.

import React from "react";

export default class App extends React.Component {
  state = {
    items: [
      { id: 1, title: "Titulo" },
      { id: 2, title: "Titulo" },
      { id: 3, title: "Titulo" }
    ]
  };

  delete = itemId => {
    //En vez de uasr item.id, usa la propiedad
    //que te ayuda a identificar tu objeto que quieres borrar.
    //Quizas clavearticulo sea la adecuada.
    const filtredData = this.state.items.filter(item => item.id !== itemId);
    this.setState({ items: filtredData });
  };

  render() {
    return (
      <table style={{ width: "100%", textAlign: "center" }}>
        <tr>
          <th># -</th>
          <th>Titulo</th>
          <th>Acción</th>
        </tr>
        {this.state.items.map((item, key) => (
          <tr key={key}>
            <td>{item.id}</td>
            <td>{item.title + item.id}</td>
            <td>
              <button onClick={() => this.delete(item.id)}>Eliminar</button>
            </td>
          </tr>
        ))}
      </table>
    );
  }
}

Si quieres más información te dejo unos enlaces muy buenos, aun que en ingles.

3
  • el problema sigue siendo el mismo, me elimina el elemento pero no el deseado, realiza la eliminación como si usara un pop, probablemente este manejando mal mis props desde el comienzo desde que agrego el articulo al arreglo, ya que tuve que realizar algo un poco extraño porque no podía hacer que se mostraran los renglones en la tabla después de que diera click en el botón de agregar articulo. una petición no tendrás algún proyecto personal que puedas pasarme para ver como manejas tu todo eso, uno que no te cause problemas pasar o compartir. Commented el 18 feb. 2020 a las 1:02
  • Hola @FelipeCazarez, no tengo ningun proyecto asi que te pueda compartir, pero si quieres me puedes pasar el json a partir del cual pintas los datos, de esta manera intentare hacerte una demo con esos datos.
    – MitaCloud
    Commented el 18 feb. 2020 a las 10:47
  • yo se que tu forma si funciona y si cambias los datos por los que manejo no tendrás ningún problema en eliminarlo, te pedía el proyecto para ver como tu manejabas los envíos de props, el como agregar elementos a un arreglo , lo cual lo mas seguro es que sea diferente a como yo lo manejo que de seguro es ahí lo que esta causando ese mal funcionamiento que me esta dando ami. Commented el 19 feb. 2020 a las 1:28
-4

Vos estas hablando a nivel de formulario.

Ponele que tu formulario se llama ''tabla".

La solución en codigo jsx sería:

arreglo.remove(index)
2
  • Como sugerencia; espera que el OP agregue más información a su pregunta para tener más argumentos para responder a su problema.
    – gugadev
    Commented el 16 feb. 2020 a las 14:51
  • -1, el método remove no existe de manera nativa en el prototipo Array, al no ser que lo crees tu mismo.
    – MitaCloud
    Commented el 17 feb. 2020 a las 12:26

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.