Reagir this.setState não é uma função

Eu sou novo no React e estou tentando escrever um aplicativo trabalhando com uma API. Eu continuo recebendo esse erro:

TypeError: this.setState não é uma função

quando tento lidar com a resposta da API. Eu suspeito que há algo errado com essa ligação, mas não consigo descobrir como corrigi-la. Aqui está o código do meu componente:

var AppMain = React.createClass({
    getInitialState: function() {
        return{
            FirstName: " "
        };
    },
    componentDidMount:function(){
        VK.init(function(){
            console.info("API initialisation successful");
            VK.api('users.get',{fields: 'photo_50'},function(data){
                if(data.response){
                    this.setState({ //the error happens here
                        FirstName: data.response[0].first_name
                    });
                    console.info(this.state.FirstName);
                }

            });
        }, function(){
        console.info("API initialisation failed");

        }, '5.34');
    },
    render:function(){
        return (
            <div className="appMain">
            <Header  />
            </div>
        );
    }
});

O retorno de chamada é feito em um contexto diferente. Você precisa binddethis a fim de ter acesso ao interior do callback:

VK.api('users.get',{fields: 'photo_50'},function(data){
    if(data.response){
        this.setState({ //the error happens here
            FirstName: data.response[0].first_name
        });
        console.info(this.state.FirstName);
    }

}.bind(this));

EDIT: Parece que você tem que ligar os dois inite apichama:

VK.init(function(){
        console.info("API initialisation successful");
        VK.api('users.get',{fields: 'photo_50'},function(data){
            if(data.response){
                this.setState({ //the error happens here
                    FirstName: data.response[0].first_name
                });
                console.info(this.state.FirstName);
            }

        }.bind(this));
    }.bind(this), function(){
    console.info("API initialisation failed");

    }, '5.34');

Você pode evitar a necessidade de .bind (this) com uma função de seta ES6.

VK.api('users.get',{fields: 'photo_50'},(data) => {
        if(data.response){
            this.setState({ //the error happens here
                FirstName: data.response[0].first_name
            });
            console.info(this.state.FirstName);
        }

    });

você também pode salvar uma referência thisantes de invocar o apimétodo:

componentDidMount:function(){

    var that = this;

    VK.init(function(){
        console.info("API initialisation successful");
        VK.api('users.get',{fields: 'photo_50'},function(data){
            if(data.response){
                that.setState({ //the error happens here
                    FirstName: data.response[0].first_name
                });
                console.info(that.state.FirstName);
            }
        });
    }, function(){
        console.info("API initialisation failed");

    }, '5.34');
},

A React recomenda vincular isso em todos os métodos que precisam usá-lo, em classvez disso, de si mesmo function.

constructor(props) {
    super(props)
    this.onClick = this.onClick.bind(this)
}

 onClick () {
     this.setState({...})
 }

Ou você pode usar em seu arrow functionlugar.

Você só precisa vincular seu evento

por exemplo

// place this code to your constructor

this._handleDelete = this._handleDelete.bind(this);

// and your setState function will work perfectly

_handleDelete(id){

    this.state.list.splice(id, 1);

    this.setState({ list: this.state.list });

    // this.setState({list: list});

}

Agora o ES6 tem a função de seta, é realmente útil se você realmente confundir com a expressão bind (this), você pode tentar a função de seta

É assim que eu faço.

componentWillMount() {
        ListApi.getList()
            .then(JsonList => this.setState({ List: JsonList }));
    }

 //Above method equalent to this...
     componentWillMount() {
         ListApi.getList()
             .then(function (JsonList) {
                 this.setState({ List: JsonList });
             }.bind(this));
 }

Você não precisa atribuir isso a uma variável local se usar a função de seta. As funções de seta são vinculadas automaticamente e você pode evitar problemas relacionados ao escopo.

O código abaixo explica como usar a função de seta em diferentes cenários

componentDidMount = () => {

    VK.init(() => {
        console.info("API initialisation successful");
        VK.api('users.get',{fields: 'photo_50'},(data) => {
            if(data.response){
                that.setState({ //this available here and you can do setState
                    FirstName: data.response[0].first_name
                });
                console.info(that.state.FirstName);
            }
        });
    }, () => {
        console.info("API initialisation failed");

    }, '5.34');
 },

Agora, em reagir com o es6 / 7, você pode vincular a função ao contexto atual com a função de seta como esta, fazer solicitações e resolver promessas como esta:

listMovies = async () => {
 const request = await VK.api('users.get',{fields: 'photo_50'});
 const data = await request.json()
 if (data) {
  this.setState({movies: data})
 }
}

Com esse método, você pode facilmente chamar essa função no componentDidMount e aguardar os dados antes de renderizar seu html na função de renderização.

Não sei o tamanho do seu projeto, mas pessoalmente aconselho a não usar o estado atual do componente para manipular dados. Você deve usar um estado externo como Redux ou Flux ou algo mais para isso.

use as funções de seta, pois as funções de seta apontam para o escopo pai e isso estará disponível. (substituto da técnica de ligação)

Aqui, este contexto está sendo alterado. Use a função de seta para manter o contexto da classe React.

        VK.init(() => {
            console.info("API initialisation successful");
            VK.api('users.get',{fields: 'photo_50'},(data) => {
                if(data.response){
                    this.setState({ //the error happens here
                        FirstName: data.response[0].first_name
                    });
                    console.info(this.state.FirstName);
                }

            });
        }, function(){
        console.info("API initialisation failed");

        }, '5.34');

Se você está fazendo isso e ainda está tendo um problema, meu problema é que eu estava chamando duas variáveis ​​com o mesmo nome.

Eu tinha companiescomo objeto trazido do Firebase e estava tentando ligar this.setState({companies: companies})- não estava funcionando por razões óbvias.