Atualizar estado

Concluído

Como o estado no React é imutável, para modificar o valor de um objeto com estado, o substituímos por um novo objeto. Portanto, evitamos uma classe inteira de bugs em que um objeto pode estar em um estado inválido porque está sendo editado.

Copiar objetos

Tipos primitivos, como valores boolianos ou números, são objetos baseados em valor em oposição a objetos de referência. Portanto, qualquer alteração substitui automaticamente o objeto inteiro.

As cadeias de caracteres se comportam de maneira semelhante porque são imutáveis. Modificamos uma cadeia de caracteres substituindo-a por um novo valor.

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

Quando trabalhamos com um objeto, precisamos criar uma instância dele para garantir a imutabilidade. A sintaxe mais comum para criar uma cópia de um objeto é a sintaxe de espalhamento, também chamada de operador de espalhamento.

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

let messageCopy = { ...message };

Modificar propriedades individuais

Normalmente, precisamos atualizar apenas um subconjunto de propriedades de um objeto. Criar uma cópia e modificar cada propriedade se tornaria entediante.

Na sintaxe anterior, observe que criamos um objeto JSON usando chaves ({ }). O operador de espalhamento pode ser usado para criar uma versão inicial do novo objeto. Ele nos permite especificar valores atualizados para determinadas propriedades. Se tivermos um novo valor para color, mas quisermos manter o texto, por exemplo, poderemos usar o código a seguir.

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

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

Aqui, text mantém o valor original. O valor color é atualizado para verde.

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