Insertar datos en matriz de estado en React

React es la biblioteca front-end más popular porque brinda a los desarrolladores la libertad de crear aplicaciones dinámicas e interactivas con eficiencia de código. Este marco tiene muchas características excelentes.

Este artículo se centrará en el objeto estado, que es esencial para implementar la funcionalidad dinámica en React. Más específicamente, mostraremos cómo mantener y actualizar el estado en React.

Insertar datos en matriz de estado en React

Muchos desarrolladores de JavaScript usan el método .push() para agregar elementos al final de la matriz. Esto funciona bien en JavaScript simple, pero si la matriz es una variable de estado (o una propiedad de un objeto de estado), usar el método .push() puede tener resultados inesperados.

Cuando usamos el método .push(), necesitamos entender la diferencia entre los efectos secundarios y los valores devueltos. Devuelve la longitud de la matriz actualizada, no la matriz actualizada, con nuevos elementos agregados al final.

Empujar elementos a la matriz es solo un efecto secundario.

No solo eso, sino que React tiene una regla estricta contra la mutación directa del objeto estado. Por lo tanto, no puede insertar elementos directamente en una propiedad de estado que contenga un valor de matriz.

Para actualizar el objeto estado en React, debe usar el método setState() y proporcionar el estado actualizado como argumento.

También puede usar el enlace useState(), que proporciona una función para actualizar una variable de estado directamente.

Echemos un vistazo al ejemplo:

import "./styles.css";
import { useState } from "react";
export default function App() {
  let [arr, setArr] = useState([1, 2, 3, 4]);
  // arr.push(5) wrong
  const numberToBeAdded = 5
  console.log(numberToBeAdded);

  return (
    <div className="App">
      <button onClick={() => setArr((arr) => [...arr, numberToBeAdded])}>Expand array</button>
    </div>
  );
}

Eche un vistazo al ejemplo en vivo. Abra la consola para ver los cambios en el valor del estado.

Usamos el gancho useState() para definir la variable de estado arr y la función setArr para actualizar esa variable. Suministramos un argumento al enlace useState(): el valor inicial de la matriz.

React no te permite usar el método .push() para mutar la variable de estado arr directamente. Si queremos agregar un valor entero 5 a la matriz, arr.push() no es la forma correcta de hacerlo.

En cambio, la mejor manera de agregar un elemento a la matriz es tener una función que tome un argumento, la variable de estado anterior, y devuelva la variable de estado nueva.

Aquí está la función del controlador:

() => setArr((arr) => [...arr, numberToBeAdded])

Como puede ver, el argumento de la función setArr() es una función de devolución de llamada que toma un valor actual de la variable de estado arr y devuelve el nuevo.

Para sumar el número al final de la matriz, usamos el operador de dispersión, también conocido como tres puntos. ...arr toma todos los valores del array actual, y le sumamos el valor contenido en la variable numberToBeAdded.

Puede usar el mismo enfoque para agregar valor al principio:

() => setArr((arr) => [numberToBeAdded, ...arr])

Simplemente mueva el valor que debe agregarse al frente.