Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo eliminar un elemento de una matriz en React

 


En este tutorial de reacción, revisaremos algunas cosas y luego veremos cómo eliminar un elemento de una matriz. El número de elementos de la matriz determina cuántos componentes de elementos se muestran en la página. Queremos poder hacer clic en un botón en un elemento específico y que React lo elimine automáticamente de la página. Pero primero, repasemos algunos conceptos clave en React.


Props vs State en React

En el componente <Item /> estamos usando un valor almacenado en el objeto props para inicializar el estado. Una cosa a tener en cuenta es cuál es la diferencia entre accesorios y estado. Ambos contienen datos, pero ¿cuál es la diferencia? El objeto props se utiliza para proporcionar datos a un componente. El estado, por otro lado, puede considerarse como datos privados. Es local y solo accesible en ese componente específico. Esto significa que otros componentes no pueden acceder directamente al estado de un componente determinado. Entonces, como podemos ver en <Items />, establecemos algunos atributos en el elemento <Item />.
reaccionar set atributo prop

Ahora, en el componente </Item>, podemos aceptar los datos transportados por el objeto props y usarlos para inicializar el estado del componente <Item />.
reaccionar inicializar estado usando accesorios

Entonces podemos ver que cada componente tiene su propio estado, que es local y privado para ellos mismos, pero que también podemos compartir datos con otro componente usando props. De hecho, es posible que algunos componentes ni siquiera tengan ningún estado, pero aún aceptan datos a través de accesorios.


Los accesorios son de solo lectura

Otro punto clave con respecto a los accesorios es que es de solo lectura. Si intenta romper esta regla haciendo algo como esto.

Encontrará un error:

TypeError: No se puede asignar a la propiedad de solo lectura 'valor' del objeto '# <Objeto>'

Entonces, los accesorios se ingresan en un componente. No puede modificar los valores almacenados en los accesorios, solo leerlos. Es por eso que el patrón que verá es leer datos de accesorios y asignarlos al estado. Luego, puede modificar el valor almacenado en el estado según sea necesario.


Levantamiento y manejo de eventos

Ahora veremos cómo eliminar un componente de la página generando y manejando un evento. En primer lugar, agreguemos ese botón en el marcado.


item.jsx

Ahí vamos, ahora tenemos un botón para eliminar un elemento en cada elemento renderizado.
reaccionar eliminar botón


Reaccionar concepto clave

El componente que posee el estado, debe ser el que lo modifique.

El botón de eliminar existe en el componente <Item />. Sin embargo, el estado que tiene la lista de <Item /> en la página está en elcomponente. Por tanto, si queremos modificar ese estado (eliminar un elemento de la matriz), deberíamos hacerlo en ese mismo componente. ¿Como hacemos eso? Al generar un evento, luego manejar ese evento. Veamos un diagrama.
reaccionar levantar evento manejar evento

Podemos hacer que el componente Item genere un evento llamado onDelete y luego, en el componente Items, podemos manejar ese evento generado con un método handleDelete ().


Pasar un controlador de eventos con accesorios

Este es un concepto muy bueno. Vamos a crear el controlador de eventos en <Items /> y luego le pasaremos una referencia a través de accesorios a <Item />. Primero, podemos definir una función simple handleDelete ().

items.jsx

Ahora, dado que hemos pasado una referencia a través de props, podemos acceder a la referencia a esa función en <Item /> así.
item.jsx

Al hacer clic en el botón Eliminar, se muestra que el controlador de eventos está funcionando. Solo estamos emitiendo una alerta en este momento, pero en un minuto eliminaremos un elemento de la lista de elementos usando la función de filtro.


Entonces, cuando tiene este tipo de escenario, es el Niño el que genera el evento y el Padre lo maneja .


Eliminar un elemento con filtro ()

En el componente secundario, debemos pasar la identificación del elemento que queremos eliminar al padre. De lo contrario, React no tendrá idea de qué elemento eliminar. Como revisamos antes, esta es la forma de pasar un argumento usando una función de flecha.

item.jsx

Ahora, en el componente principal, necesitamos actualizar la función handleDelete () para aceptar esa identificación como parámetro. Además, necesitamos usar la función de filtro para crear una nueva matriz de elementos que no contenga el elemento en el que se hizo clic. Luego tenemos que llamar a la función setState () para actualizar el estado.

items.jsx

Ahora, si hacemos clic en el botón eliminar para un elemento determinado, ¡se elimina de la página!


Una forma más limpia de pasar accesorios

Al pasar más de un accesorio, puede limpiar su código utilizando un objeto como accesorio.

Entonces, en lugar de tener un atributo individual para cada accesorio como en este código:

Podemos simplemente pasar el objeto en sí así:

Esto significa que también debe actualizar item.jsx para hacer referencia a accesorios usando this.props.item.value en lugar de this.props.value.

Finalmente, probemos los botones de incremento y eliminación para asegurarnos de que todo sigue funcionando bien.


Stack Overflow tiene una buena discusión sobre esto:

Cuando use React, nunca debe mutar el estado directamente. Si se cambia un objeto (o Array, que también es un objeto), debe crear una nueva copia.

Otros han sugerido usar Array.prototype.splice (), pero ese método muta el Array, por lo que es mejor no usar splice () con React.

Es más fácil usar Array.prototype.filter () para crear una nueva matriz.


Cómo eliminar un elemento de una matriz en el resumen de React

Para eliminar un elemento de la página en React, debe seguir algunos pasos. En nuestro ejemplo, primero tuvimos que lidiar con la generación y el manejo de eventos entre los componentes hijo y padre. Luego vimos que al manejar el evento en el padre, usamos la función de filtro para crear una nueva matriz de elementos que no incluía el que se hizo clic. Por último, usamos la función setState () para anular el estado existente con el nuevo estado que ya no tenía el elemento en el que se hizo clic.



Publicar un comentario

0 Comentarios