Реагируйте this.setState не является функцией

Question

Реагируйте this.setState не является функцией

105

Я новичок в 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>
        );
    }
});

Ivan 25 июнь 2015, в 09:22

Источник

Теги:

javascript

reactjs

4 ответа

53

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

    });

goodhyun 26 янв. 2016, в 19:24

0

Это хорошо работает. Фактически, ключевое слово функции не должно отображаться в файле es6.
JChen___ 12 июль 2016, в 14:32
4

Ваш ответ помог мне :-) Используя класс ES6 и RN 0.34, я нашел два способа связать «this» с функцией обратного вызова. 1) onChange={(checked) => this.toggleCheckbox()} , 2) onChange={this.toggleCheckbox.bind(this)} .
devdanke 16 окт. 2016, в 00:12
0

Можете помочь объяснить, как это работает?
GMsoF 09 дек. 2016, в 03:55
0

Это хорошо, если вам не нужно поддерживать старые браузеры.
User 30 март 2017, в 20:15
0

Идеальное решение
Hitesh Sahu 26 июль 2017, в 09:11
1

GMsoF, эти два решения работают, потому что a) когда вы делаете .bind(this) , он устанавливает значение this в родительский контекст, из которого this.toggleCheckbox() , в противном случае this будет указывать на то, где он фактически был выполнен. б) Решение жирной стрелки работает, потому что оно сохраняет ценность this , поэтому оно помогает вам, не насильственно изменяя значение this . В JavaScript this просто относится к текущей области видимости, поэтому, если вы пишете функцию, this та функция. Если вы поместите функцию внутри нее, this будет внутри этой дочерней функции. Жирные стрелки сохраняют контекст, откуда вызывается
agm1984 03 нояб. 2017, в 19:11
0

Это позволяет вам вкладывать вызовы функций точно так же, как это, и не беспокоиться о том, чтобы всегда помнить о присоединении .bind(this) к нему. Посмотрите на комментарий devdanke еще раз и посмотрите, как единственное отличие - this.foo.bind(this) и () => this.foo()
agm1984 03 нояб. 2017, в 19:14

Показать ещё 5 комментариев

26

вы также можете сохранить ссылку на 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');
},

user2954463 14 нояб. 2015, в 15:48

2

Теперь 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));
 }

Sameel 22 май 2017, в 15:22

Ещё вопросы

Это хорошо работает. Фактически, ключевое слово функции не должно отображаться в файле es6.
Ваш ответ помог мне :-) Используя класс ES6 и RN 0.34, я нашел два способа связать «this» с функцией обратного вызова. 1) onChange={(checked) => this.toggleCheckbox()} , 2) onChange={this.toggleCheckbox.bind(this)} .
Можете помочь объяснить, как это работает?
Это хорошо, если вам не нужно поддерживать старые браузеры.
GMsoF, эти два решения работают, потому что a) когда вы делаете .bind(this) , он устанавливает значение this в родительский контекст, из которого this.toggleCheckbox() , в противном случае this будет указывать на то, где он фактически был выполнен. б) Решение жирной стрелки работает, потому что оно сохраняет ценность this , поэтому оно помогает вам, не насильственно изменяя значение this . В JavaScript this просто относится к текущей области видимости, поэтому, если вы пишете функцию, this та функция. Если вы поместите функцию внутри нее, this будет внутри этой дочерней функции. Жирные стрелки сохраняют контекст, откуда вызывается
Это позволяет вам вкладывать вызовы функций точно так же, как это, и не беспокоиться о том, чтобы всегда помнить о присоединении .bind(this) к нему. Посмотрите на комментарий devdanke еще раз и посмотрите, как единственное отличие - this.foo.bind(this) и () => this.foo()

Davin Tryon · Accepted Answer · 2015-06-25T10-38-00.000Z

Обратный вызов выполняется в другом контексте. Для доступа к обратному вызову необходимо 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');

Показать это в учебнике: facebook.github.io/react/docs/tutorial.html
@TravisReeder, нет. Там нет упоминания о привязке в учебнике.