React this.setState не є функцією

Я новачок у React і намагаюся написати додаток, що працює з API. Я продовжую отримувати цю помилку:

TypeError: this.setState не є функцією

коли я намагаюся обробити відповідь API. Я підозрюю, що з цим прив'язкою щось не так, але я не можу зрозуміти, як це виправити. Ось код мого компонента:

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

Зворотний виклик проводиться в іншому контексті. Вам потрібно зробити bindце this, щоб мати доступ усередині зворотного дзвінка:

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: Схоже, вам потрібно зв’язати initі 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');

Ви можете уникнути необхідності .bind (це) за допомогою функції стрілки 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);
        }

    });

Ви також можете зберегти посилання, thisперш ніж викликати apiметод:

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 рекомендує пов'язувати це у всіх методах, для яких потрібно використовувати це classзамість цього self function.

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

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

Або ви можете використовувати arrow functionзамість цього.

Вам просто потрібно зв’язати свою подію

для екс-

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

}

Тепер у ES6 функція стрілок - це дуже корисно, якщо ви дійсно плутаєте з виразом bind (this), ви можете спробувати функцію стрілки

Так я і роблю.

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

Вам не потрібно призначати цю локальну змінну, якщо ви використовуєте функцію стрілки. Функції стрілок автоматично прив’язуються, і ви можете залишатися осторонь проблем, пов’язаних із сферою застосування.

Нижче коду пояснюється, як використовувати функцію стрілки в різних сценаріях

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

Тепер у взаємодії з es6 / 7 ви можете прив’язати функцію до поточного контексту за допомогою такої функції стрілки, зробити запит і вирішити такі обіцянки:

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

За допомогою цього методу ви можете легко викликати цю функцію в компонентіDidMount і чекати даних, перш ніж надати html у функції візуалізації.

Я не знаю розміру вашого проекту, але я особисто раджу не використовувати поточний стан компонента для маніпулювання даними. Для цього слід використовувати зовнішній стан, такий як Redux або Flux, або щось інше.

використовуйте функції стрілок, оскільки функції стрілок вказують на батьківський обсяг, і це буде доступно. (заміна техніки зв’язування)

Тут ЦЕЙ контекст змінюється. Використовуйте стрілку для збереження контексту класу 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');

Якщо ви це робите і у вас все ще виникають проблеми, моя проблема полягає в тому, що я називав дві змінні однойменною назвою.

Я був companiesоб'єктом, завезеним із Firebase, а потім намагався зателефонувати this.setState({companies: companies})- він не працював із зрозумілих причин.