Utilizando bind com FEATCH API | React parte 1: componentes reutilizáveis para sua webapp

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"); } }); }

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!