Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Actualizar matrices con React useState Hook sin Push

 En este artículo, veremos por ejemplo cómo actualizar matrices a través del enlace React useState()usando el push()método del objeto Array.

Crear un estado de matriz con useState()

Primero, veamos cómo usar el useState()gancho para crear una variable de estado de matriz.

import React from "react";

const { useState } = React;

const [myArray, setMyArray] = useState([]);

Desestructuramos el valor de retorno del useState()gancho para obtener una variable que contenga la matriz de estado y un método para actualizar el estado.

No puede actualizar la matriz directamente sin utilizar el método devuelto useState()En nuestro caso, lo es setMyArray().

Agregar un elemento nuevo a la matriz de estado

Ahora que el estado es una matriz, ¿cómo agregar un nuevo elemento a la matriz?

Normalmente, usaríamos el push()método para agregar un nuevo elemento a una matriz:

myArray.push(1);

Sin embargo, con React, necesitamos usar el método devuelto useStatepara actualizar la matriz.

Simplemente, usamos el método de actualización (en nuestro ejemplo lo es setMyArray()) para actualizar el estado con una nueva matriz que se crea combinando la matriz anterior con el nuevo elemento usando el operador Spread de JavaScript.

También podemos definir una función que cree la nueva matriz a partir de la matriz anterior y pasarla al useStatemétodo de actualización.

setMyArray(oldArray => [...oldArray, newElement]);

La función tendrá la matriz anterior como primer parámetro. En caso de que desee utilizar el primer enfoque, debe acceder a la matriz anterior desde el objeto de estado.

Ejemplo de reacción completa para actualizar una matriz de estado

Este es un ejemplo completo:

<body>
<div id="root"></div>

<script>
const { useState } = React;

const App = () => {
    const [myArray, updateMyArray] = useState([]);

    const onClick = () => {
        updateMyArray( arr => [...arr, `${arr.length}`]);
    };
    return [
        <input type="button" onClick={ onClick } value="Update" />,

        <div>{myArray.map( e =>
          <div>{ e }</div>
        )}
        </div>
    ];
}

ReactDOM.render(
    <App />,
    document.getElementById("root")
);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
</body>

Pasamos una función a nuestro updateMyArray()método que se encargará de proporcionar una nueva matriz concatenando la matriz anterior con el nuevo elemento utilizando el operador Spread. El nuevo elemento en este ejemplo es simplemente la longitud de la matriz anterior.

Conclusión

En este ejemplo, hemos visto cómo actualizar el estado de la matriz en React usando el useStategancho y el operador Spread en lugar del push()método utilizado para agregar normalmente nuevos elementos a las matrices en JavaScript.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas