Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

POST não altera o JSON do exercício

Referente ao curso React parte 1: componentes reutilizáveis para sua webapp, no capítulo Cadastrando novos autores e atualização de componentes e atividade Manutenção do estado form e mais eventos

por Victor Porto Padilha
| 67.8k xp | 7 posts

Estou usando o FETCH e ele não retorna erro nenhum, mas o JSON do exercício não atualiza,

aqui está meu código:

  enviaForm(event){
    event.preventDefault();
    console.log("Dados sendo enviados");
    fetch("https://cdc-react.herokuapp.com/api/autores", {credentials: 'include'}, {
      method: 'POST',
      body: JSON.stringify({email: this.state.email, senha: this.state.senha, nome: this.state.nome}),
      headers: {
        'Accept': 'aplication/json',
        'Content-Type': 'aplication/json'
      },
      mode: 'no-cors'
    })
    .then(response => {
      if (response.status !== 200){
        console.log(response.status);
        return;
      }
      return response.json()})
    .then(data => this.setState({lista:data}))
    .catch(err => console.log(err));

  }

Qual o motivo disso acontecer?

7 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Victor, tudo bem? O status da sua resposta sua é diferente de 200?

Tente logar sua response e logar o data para ver as informações que estão chegando.

Espero ter ajudado.

por Victor Porto Padilha
| 67.8k xp | 7 posts

Opa Matheus.

Não, ele retorna status 200.

Loguei a response e o date e ele retorna:

https://imgur.com/C686LbR

O date nesse caso é o mesmo de antes do POST. Ele não foi alterado e eu não estou entendendo o motivo disso

Valeu!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Estranho, consegue me passar seu projeto? Sobe ele no Github ou no Google Drive (zipado) e me manda.

Deve ser algo bem simples que não estamos vendo.

Fico no aguardo.

por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Victor! Como vai?

Uma coisa que observei no código é que nos headers vc informa para ambos os cabeçalhos o valor aplication/json quando o correto seria application/json, com duas letras p! Não sei se o problema é esse, mas corrija aí e veja se as coisas passam a funcionar da forma como vc esperava!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

por Victor Porto Padilha
| 67.8k xp | 7 posts

Opa Gabriel, fiz o que você falou e continua a mesma bronca. Acredito que seja algum bug no back end, então?

Segue o link do arquivo do meu projeto zipado no Google Drive:

https://drive.google.com/open?id=1pU-8vw8dhwX8z1XUXdMDOc1o6wmR5S-L

Obrigado pela atenção!

solução!
por Vagnerlandio Nunes
| 115.5k xp | 12 posts

Bom dia Victor,

Encontrei dois erros na função fetch no método enviaForm(event).

O primeiro é que {credentials: 'include'} precisa estar dentro do objeto passado como segundo parâmetro da função fetch.

E o segundo é que, quando utiliza mode: 'no-cors' na requisição, o cabeçalho deve possuir somente simple-headers¹. Os únicos content-type considerados como simple-headers são:

  • 'application/x-www-form-urlencoded'
  • 'multipart/form-data'
  • 'text/plain'

Como você está passando um conteúdo do tipo 'application/json' e mode: 'no-cors', o conteúdo será ignorado. As outra informações serão enviadas, mas o conteúdo irá vazio.

Para corrigir esse problema, altera o mode: 'no-cors' para mode: 'cors'.

Segue o código alterado:

fetch("https://cdc-react.herokuapp.com/api/autores", {
    credentials: 'include',
    method: 'POST',
    body: JSON.stringify({ email: this.state.email, senha: this.state.senha, nome: this.state.nome }),
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    mode: 'cors'
})

Testa e diz se funcionou :D

Abraços!

1 - simple-header

por Victor Porto Padilha
| 67.8k xp | 7 posts

Funcionou! Muito Obrigado!