English 中文 العربية 日本語 Português

Object & Array State Estado de objeto e de array

Última atualização: 2026-11-03

Object & Array State Estado de objeto e de array

O estado precisa ser substituído por um objeto ou array novo antes que o React perceba uma atualização: use o operador spread para sobrescrever um campo em objetos, e use spread, map ou filter para construir um array novo em listas. Alterar no lugar deixa a referência intacta, então o React não vê mudança e a interface não é atualizada. Atualizações imutáveis são a regra que todo desenvolvedor React reaprende o tempo todo.

GrupoRenderização e Estado
TipoPadrão
DesdeReact 16.8

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

setUser({ ...user, name: 'New name' })       // Objeto: spread e sobrescrita
setList([...list, newItem])               // Array: spread e inclusão
setList(list.filter((x) => x.id !== id))  // Array: filter para remover

Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

O nome "Alice" e a tag "React" são exibidos; clicar no botão de renomear troca o nome para "Bob", e clicar no botão de adicionar tag acrescenta mais uma tag "Hooks" a cada clique — toda atualização acontece criando um objeto novo.
▶ Experimente

💡 Pontos-chave

⚠️ Aviso user.name = 'x' ou user.tags.push(...) não dispara re-renderização: a referência continua a mesma, então o React acredita que nada mudou.
💡 Dica Espalhe objetos aninhados camada por camada: setUser({ ...u, addr: { ...u.addr, city: 'Shanghai' } }); espalhar apenas o nível de fora não basta.
ℹ️ Informação Manter a estrutura plana e os estados independentes elimina boa parte do boilerplate de espalhar objetos novos camada por camada.
usestate functional-updates list-transform rendering-model
Mais casos em breve.

📚 Tutoriais Relacionados

Noções básicas sobre estado: useState
Lição 6: os padrões de atualização imutável para estado de objeto e de array.

❓ Perguntas Frequentes

P Por que mudar um estado de objeto não atualiza a página?
R O React compara a referência antiga e a nova com Object.is: uma alteração no lugar mantém a referência, então o estado conta como inalterado. Você precisa criar um objeto novo com o spread e passá-lo ao setState.
P Como atualizo corretamente um estado de objeto aninhado?
R Espalhe do nível que você muda até o topo: setUser({ ...user, addr: { ...user.addr, city: 'Shanghai' } }), mantendo intactas todas as referências não alteradas.
P Como adiciono e removo itens em um estado de array?
R Inclua com [...list, item] ou prependa com [item, ...list]; remova com filter((x) => x.id !== id). Os dois devolvem um array novo.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%