El estado de un componente es un objeto de sólo lectura que no debes modificar directamente como en el siguiente ejemplo:
1
// mal - no hagas esto
2
this.state.title ="Otro título";
Copied!
Para modificar el estado utiliza el método setState:
1
this.setState({ title:"Otro título"});
Copied!
El método setState crea un nuevo estado (un nuevo objeto), no modifica el anterior. A esto se le conoce como inmutabilidad. La idea es que los cambios al estado sean explícitos y predecibles, y las aplicaciones más fáciles de mantener en el tiempo.
Acostumbrarse a escribir código inmutable toma algún tiempo pero es una buena práctica. En este capítulo vamos a ver algunas técnicas para manipular arreglos y objetos de forma inmutable.
Arreglos
En vez de modificar el arreglo original para insertar, actualizar y eliminar elementos, lo que vamos a hacer es construir un nuevo arreglo con el cambio. Veamos cómo hacerlo.
Insertando elementos
Para insertar un elemento a un arreglo utiliza el método concat que retorna un nuevo arreglo con el nuevo elemento:
1
const arr =[1,2,3];
2
const newArr = arr.concat(4);// [1, 2, 3, 4]
3
4
// arr sigue siendo [1, 2, 3]
Copied!
Cambiando un elemento
Existen varias formas de cambiar un elemento de forma inmutable. La primera es con el método map:
1
const arr =[1,2,3];
2
3
// vamos a cambiar la segunda posición por un 0
4
const idx =1;
5
const newArr = arr.map((elem, i)=>
6
idx === i ?0: elem
7
);
8
9
// arr: [1, 2 3]
10
// newArr: [1, 0, 3]
Copied!
La segunda es utilizando el método slice y concat:
1
const arr =[1,2,3];
2
3
const idx =1;
4
const newArr = arr.slice(0. idx)
5
.concat(0)
6
.concat(arr.slice(idx +1));
Copied!
La tercera es con el nuevo operador ... (spread) de JavaScript:
1
const arr =[1,2,3];
2
3
const idx =1;
4
const newArr =[
5
...arr.slice(0, idx),
6
0,
7
...arr.slice(idx +1)
8
];
Copied!
Removiendo un elemento
Puedes remover un elemento de forma inmutable de varias formas. La primera es con el método filter:
1
const arr =[1,2,3];
2
3
// vamos a remover la segunda posición
4
const idx =1;
5
const newArr = arr.filter((e, i)=> idx != i);
6
7
// arr: [1, 2 3]
8
// newArr: [1, 3]
Copied!
La segunda es utilizando el método slice y concat: