Reagisci this.setState non è una funzione

Sono nuovo in React e sto provando a scrivere un'app che funziona con un'API. Continuo a ricevere questo errore:

TypeError: this.setState non è una funzione

quando provo a gestire la risposta API. Ho il sospetto che ci sia qualcosa di sbagliato in questa associazione ma non riesco a capire come risolverlo. Ecco il codice del mio 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>
        );
    }
});

La richiamata viene effettuata in un contesto diverso. È necessario bindper thisal fine di avere accesso all'interno della richiamata:

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: sembra che devi associare sia il initche il apicall:

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');

È possibile evitare la necessità di .bind (questo) con una funzione freccia 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);
        }

    });

potresti anche salvare un riferimento thisprima di invocare il apimetodo:

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');
},

React raccomanda di associarlo a tutti i metodi che devono usare questo classinvece di questo di sé function.

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

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

Oppure puoi usare arrow functioninvece.

Devi solo associare il tuo evento

per ex-

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

}

Ora ES6 ha la funzione freccia, è molto utile se confondi davvero con l'espressione bind (questa) puoi provare la funzione freccia

Questo è come lo faccio.

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

Non è necessario assegnarlo a una variabile locale se si utilizza la funzione freccia. Le funzioni freccia prendono automaticamente l'associazione e puoi stare lontano dai problemi relativi all'ambito.

Il codice seguente spiega come utilizzare la funzione freccia in diversi scenari

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');
 },

Ora, in reazione a es6 / 7, puoi associare la funzione al contesto attuale con la funzione freccia come questa, fare richiesta e risolvere promesse come questa:

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

Con questo metodo puoi facilmente chiamare questa funzione in componentDidMount e attendere i dati prima di renderizzare il tuo html nella tua funzione di rendering.

Non conosco le dimensioni del tuo progetto, ma sconsiglio personalmente di utilizzare lo stato corrente del componente per manipolare i dati. Dovresti usare uno stato esterno come Redux o Flux o qualcos'altro per quello.

utilizzare le funzioni freccia, poiché le funzioni freccia indicano l'ambito padre e questo sarà disponibile. (sostituto della tecnica di associazione)

Qui QUESTO contesto viene modificato. Utilizzare la funzione freccia per mantenere il contesto della 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 lo stai facendo e hai ancora un problema, il mio problema è che stavo chiamando due variabili con lo stesso nome.

Avevo companiesun oggetto portato da Firebase e poi stavo provando a chiamare this.setState({companies: companies})- non funzionava per ovvi motivi.