Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Utilizando bind com FEATCH API

Referente ao curso React parte 1: componentes reutilizáveis para sua webapp

por José Ferreira
| 96.7k xp | 13 posts

Olá, pessoal estou com uma pequena dúvida com utilizar o bind com featch api, com jquery foi de boas com featch api gera esse erro:

TypeError: {(intermediate value)(intermediate value)(intermediate value)}.bind is not a function


sendForm(event) {

    event.preventDefault();

    let url = "http://localhost:8080/api/autores";
    let data = {
      nome: this.state.nome,
      email: this.state.email,
      senha: this.state.senha
    }
    fetch(url, {
        method: 'POST',
        headers: new Headers({
          'Content-Type': 'application/json'
        }),
        body: JSON.stringify(data),
      }.bind(this)).then((response) => {
        console.log(response)
        this.component.setState({lista:response});        
      })
      .catch(
        error => console.log(error)
      );

    $.ajax({
      url: 'http://localhost:8080/api/autores',
      contentType: 'application/json',
      dataType: 'json',
      type: 'post',
      data: JSON.stringify({
        nome: this.state.nome,
        email: this.state.email,
        senha: this.state.senha
      }),
      success: function (resposta) {
        console.log(resposta);
        console.log("enviado com sucesso");
        this.setState({
          lista: resposta
        });
      }.bind(this),
      error: function (resposta) {
        console.log("erro");
      }
    });
  }
1 resposta
solução!
por Rafael Rollo
| 496k xp | 755 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala José, tudo bem ?

Quando estamos usando a fetch api não precisamos fazer esse bind depois do objeto que define os detalhes da sua requisição.

Tente fazer o seguinte:

fetch(url, {
        method: 'POST',
        headers: new Headers({
          'Content-Type': 'application/json'
        }),
        body: JSON.stringify(data),
})
.then((response) => {
        console.log(response)
        this.component.setState({lista:response});
})
.catch(error => console.log(error));

Imagino que já não tenha mais o problema com o bind(this).

Mas ainda tem mais alguns pontos de atenção. Neste trecho,

.then((response) => {
        console.log(response)
        this.component.setState({lista:response});
})

imagino que você queria fazer isso:

.then((response) => {
        console.log(response)
        this.setState({lista:response}); // <--- setState chamado a partir do próprio componente (this)
})

Uma outra coisa - ainda neste trecho - é que quando recebemos a promisse resultante da chamada à fetch(), a response na verdade se refere ao objeto que representa o response http (com status, headers, corpo, etc) e não o conteúdo devolvido no corpo da resposta como por exemplo é feito no callback de sucesso da $.ajax.

Pra que você consiga extrair o corpo da resposta (um json, por exemplo) usando fetch poderia fazer assim:

fetch(url, {
        method: 'POST',
        headers: new Headers({
          'Content-Type': 'application/json'
        }),
        body: JSON.stringify(data),
})
.then((response) => {
    if(response.ok) 
        return response.json();

    throw new Error('Não foi possível completar a operação');
})
.then(json => this.setState({lista: json}))
.catch(error => console.log(error));

Espero ter ajudado. Abraço!