Reakcja this.setState nie jest funkcją

Jestem nowy w React i próbuję napisać aplikację współpracującą z interfejsem API. Wciąż pojawia się ten błąd:

TypeError: this.setState nie jest funkcją

kiedy próbuję obsłużyć odpowiedź API. Podejrzewam, że coś jest nie tak z tym wiązaniem, ale nie mogę wymyślić, jak to naprawić. Oto kod mojego komponentu:

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

Oddzwanianie jest wykonywane w innym kontekście. Trzeba bindsię thisw celu uzyskania dostępu do wnętrza zwrotnego:

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

EDYCJA: Wygląda na to, że musisz powiązać oba wywołania initi api:

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

Możesz uniknąć potrzeby .bind (this) dzięki funkcji strzałki 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);
        }

    });

możesz również zapisać odwołanie thisprzed wywołaniem apimetody:

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 zaleca powiązanie tego we wszystkich metodach, które muszą tego użyć classzamiast tego samego function.

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

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

Lub możesz użyć arrow functionzamiast tego.

Musisz tylko powiązać swoje wydarzenie

dla byłych

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

}

Teraz ES6 ma funkcję strzałki, więc naprawdę pomocne, jeśli naprawdę mylisz się z wyrażeniem bind (to), możesz wypróbować funkcję strzałki

Tak właśnie robię.

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

Nie musisz przypisywać tego do zmiennej lokalnej, jeśli używasz funkcji strzałki. Funkcje strzałek wiążą się automatycznie i można uniknąć problemów związanych z zasięgiem.

Poniższy kod wyjaśnia, jak używać funkcji strzałek w różnych scenariuszach

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

Teraz w reakcji z es6 / 7 możesz powiązać funkcję z bieżącym kontekstem za pomocą funkcji strzałki w ten sposób, wysyłać żądania i rozwiązywać takie obietnice:

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

Za pomocą tej metody można łatwo wywołać tę funkcję w module componentDidMount i poczekać na dane przed renderowaniem kodu HTML w funkcji renderowania.

Nie znam wielkości twojego projektu, ale osobiście odradzam używanie obecnego stanu komponentu do manipulowania danymi. Powinieneś użyć do tego stanu zewnętrznego, takiego jak Redux lub Flux lub coś innego.

użyj funkcji strzałek, ponieważ funkcje strzałek wskazują zakres nadrzędny, a to będzie dostępne. (substytut techniki wiązania)

Tutaj ten kontekst się zmienia. Użyj funkcji strzałki, aby zachować kontekst klasy 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');

Jeśli to robisz i nadal masz problem, moim problemem jest to, że nazwałem dwie zmienne o tej samej nazwie.

Miałem companiesjako przedmiot przywieziony z Firebase, a potem próbowałem zadzwonić this.setState({companies: companies})- z oczywistych powodów nie działało.