Abordagem imperativa para atualizar o estado aninhado

No React, as atualizações de estado são imutáveis. Isso significa que para atualizar um objeto ou array aninhado, você não pode simplesmente modificar suas propriedades e esperar que as alterações sejam refletidas na UI. Em vez disso, você precisa criar um novo objeto ou array que inclua os valores atualizados e depois passá-lo para setState.

Considere o exemplo a seguir, onde queremos atualizar a propriedade name do objeto no índice 1 no matriz de itens armazenada em state:

handleChange: function (e) {
  // Make a copy of the items array
  let items = [...this.state.items];

  // Make a copy of the item object at index 1
  let item = {...items[1]};

  // Change the name property of the copied item
  item.name = 'New Name';

  // Replace the item at index 1 with the updated item
  items[1] = item;

  // Update the state with the new items array
  this.setState({items});
},

Nesta abordagem, usamos a sintaxe spread (...) para criar cópias superficiais do array items e do objeto item no índice 1. Em seguida, modificamos a propriedade name do item copiado e substituímos o item no índice 1 com a versão atualizada. Por fim, atualizamos o estado com a nova matriz de itens.

Essa abordagem é direta e funciona bem para atualizações de estado simples. No entanto, pode se tornar complicado e sujeito a erros para atualizações de estado complexas envolvendo vários objetos ou matrizes aninhados.