Estilo Stack Overflow & Debug

Debug Clinic: Diagnóstico de Erros Clássicos

Encontre a causa raiz e a solução passo a passo para os erros mais comuns do JavaScript, React, Node, TypeScript e Git.

6 Casos Catalogados

React

TypeError: Cannot read properties of undefined (reading 'map')

A tela fica completamente em branco (White Screen of Death) ao tentar carregar uma lista de dados da API.

Mensagem de Erro no Console

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

⚠️ O Sintoma Visível

A tela fica completamente em branco (White Screen of Death) ao tentar carregar uma lista de dados da API.

🔍 Diagnóstico Técnico (Por que acontece?)

O estado inicial da lista é 'undefined' antes do fetch da API terminar. O React tenta renderizar a lista imediatamente no primeiro ciclo antes do dado chegar.

Comparativo Antes vs Depois:

Código com Bug (Incorreto)

function ListaUsuarios() {
  const [users, setUsers] = useState(); // ❌ Estado inicial undefined

  useEffect(() => {
    fetch('/api/users').then(res => res.json()).then(setUsers);
  }, []);

  return (
    <ul>
      {/* ❌ Quebra porque users ainda é undefined no 1º render */}
      {users.map(u => <li key={u.id}>{u.nome}</li>)}
    </ul>
  );
}

Código Corrigido (Recomendado)

function ListaUsuarios() {
  const [users, setUsers] = useState<User[]>([]); // ✅ Inicializado com array vazio []

  useEffect(() => {
    fetch('/api/users').then(res => res.json()).then(setUsers);
  }, []);

  return (
    <ul>
      {/* ✅ Optional chaining ou render condicional com array seguro */}
      {users?.map(u => <li key={u.id}>{u.nome}</li>)}
    </ul>
  );
}

Dica de Prevenção: Sempre inicialize estados que guardam coleções com um array vazio `useState([])` ou use optional chaining `users?.map()`.

React

Warning: Each child in a list should have a unique 'key' prop

Aparece aviso em amarelo no console. Ao excluir ou reordenar itens, o React re-renderiza itens errados ou mantém inputs preenchidos no lugar errado.

Node.js

CORS policy: No 'Access-Control-Allow-Origin' header is present

A requisição fetch do frontend falha com status de rede (failed), mesmo a rota existindo no backend.

React

Infinite loop: Too many re-renders in useEffect

A aba do navegador trava consumindo 100% de CPU ou o React aborta com erro fatal.

TypeScript

TypeScript: Property does not exist on type 'never'

Erro em tempo de compilação do TypeScript ao tentar acessar uma propriedade em um array de estado.

Git

Git: fatal: refusing to merge unrelated histories

Ao tentar fazer 'git pull origin main' após criar um repositório no GitHub com README pré-existente, o git recusa o merge.