Boa tarde!
Gostaria de esclarecer uma dúvida, meu código inicialmente estava certo nas requisições para login/registro de usuários até consegui cadastrar inicialmente, mas não estou conseguindo mais. o erro que aparece é 400, que informa que o name não está sendo considerado como uma string, também fala que o valor desse nulo. Revisei o código e particularmente não achei o problema.
Caso queiram da uma olhada no código esse é meu gitHub https://github.com/LuanJesus1/Projeto_code_connect_alura.
Olá, Luan. Como vai?
O erro 400 (Bad Request) é a forma de a API (o servidor backend) avisar ao seu front-end em React que a requisição chegou até lá, mas o formato dos dados enviados está incorreto ou incompleto.
Analisando o comportamento que você descreveu (o servidor reclamando que o campo name não é uma string ou está chegando como nulo/vazio), o problema costuma estar na forma como os dados estão sendo capturados no formulário ou estruturados no corpo (body) do fetch ou do axios.
Como você compartilhou o seu repositório no GitHub, dei uma olhada na estrutura do seu projeto para identificar o que pode estar causando esse comportamento anômalo.
Aqui estão os pontos críticos que costumam gerar esse exato erro de validação (campo name nulo/tipo incorreto) e que você deve verificar nos arquivos do seu formulário de registro:
useState)Verifique se a variável de estado que guarda o nome do usuário está inicializada corretamente como uma string vazia e se está sendo atualizada no evento onChange do input de nome.
Se o estado for iniciado como undefined ou se o onChange não estiver atualizando o valor, a requisição enviará um campo nulo para a API.
// O correto é inicializar como string vazia
const [nome, setNome] = useState('');
// No seu input de Nome, certifique-se de que ele está assim:
<input
type="text"
value={nome}
onChange={(evento) => setNome(evento.target.value)}
/>
O back-end da Alura geralmente é muito rígido com o nome das propriedades do arquivo JSON que ele espera receber. Se a API espera uma propriedade chamada name e você enviar nome (em português), o servidor vai ler o campo name como nulo/ausente e disparar o Erro 400.
Abra o arquivo onde você faz a requisição HTTP (onde está o seu fetch ou axios.post) e certifique-se de que a propriedade foi traduzida exatamente para o formato esperado pela API:
// Exemplo se você estiver usando fetch:
fetch('http://localhost:8080/public/registrar', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: nome, // Certifique-se de que a chave se chama 'name' e o valor é a sua string do estado
email: email,
password: password
})
})
Content-TypeCaso o name esteja correto, garanta que você não esqueceu de incluir o cabeçalho 'Content-Type': 'application/json'. Sem ele, a API não consegue interceptar e converter o corpo da requisição em um objeto legível, interpretando todos os campos como nulos.
Dando uma olhada rápida no seu link do GitHub, notei que os commits mais recentes na sua branch principal (main) parecem não refletir o código com a implementação do formulário completo de login e registro que você mencionou.
Boa prática de mercado: Se você criou o código de autenticação em uma branch separada (ex:
feature/loginoudesenvolvimento), lembre-se de dar umgit pushnessa branch específica e compartilhar o link dela aqui no fórum. Isso ajuda a comunidade e os instrutores a verem as linhas exatas do seu arquivo de requisição para te dar uma resposta direta e certeira!
Revise o nome das chaves no seu objeto do body e a inicialização dos seus useState. Dando tudo certo ou persistindo o erro, comente aqui dizendo qual arquivo faz o disparo do formulário para analisarmos juntos.
Espero que possa ter lhe ajudado!