Actualización del estado

Completado

Dado que el estado en React es inmutable, para modificar el valor de un objeto con estado, lo reemplazamos por un objeto nuevo. Por lo tanto, se evita una clase completa de errores en los que un objeto puede estar en un estado no válido porque se está editando.

Copia de objetos

Los tipos primitivos, como los valores booleanos o los números, son objetos basados en valores, en contraposición a objetos de referencia. Por lo tanto, cualquier cambio reemplaza todo el objeto de forma automática.

Las cadenas se comportan de igual modo porque son inmutables. Modificamos una cadena reemplazándola por un valor nuevo.

let message = 'Hello, ';
message = message + 'world!';

Cuando trabajamos con un objeto, es necesario crear una instancia nueva de este para garantizar la inmutabilidad. La sintaxis más común para crear una copia de un objeto es la sintaxis spread, también denominado el operador spread.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = { ...message };

Modificación de propiedades individuales

Normalmente, solo necesitamos actualizar un subconjunto de propiedades para un objeto. Crear una copia y modificar cada propiedad resultaría tedioso.

En la sintaxis anterior, observe que creamos un objeto JSON nuevo mediante el uso de llaves ({ }). El operador spread se puede usar para crear una versión inicial del objeto nuevo. Nos permite especificar valores actualizados para ciertas propiedades. Por ejemplo, si tenemos un valor nuevo para color, pero quiere conservar el texto, podemos usar el código siguiente.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = {
    ...message,
    color: 'green'
};

Aquí, text mantiene el valor original. El valor color se actualiza a verde.

// new object
{
    text: 'Hello, world',
    color: 'green'
}