Использование this.setState в функции обратного вызова

У меня есть следующий код, получая в твиттер сроки в среагировать компонента:Использование this.setState в функции обратного вызова

componentWillMount: function() { 
    twitter.get('statuses/user_timeline', 
    function(error, data) { 
     this.setState({tweets: data}) 
    }); 
    }

Но я не могу установить state там, потому что this не установлен компонент в этой функции обратного вызова.

Как установить состояние в этом обратном вызове?

n.b. console.log (data) вместо this.setState отлично работает, поэтому я подозреваю, что проблема связана с этой переменной.

источник

2015-12-05 sanjaypoyzer

Вы можете установить this с .bind способом, как это и называют twitter.get в componentDidMount как в этом example

componentDidMount: function() { 
    twitter.get('statuses/user_timeline', function(error, data) { 
     this.setState({tweets: data}) 
    }.bind(this)); // set this that refers to you React component 
}

Example

источник

2015-12-05 19:01:41

Благодаря @Alexander. Однако это не работает. Ваша скрипка терпит неудачу, потому что вы не можете 'setState' в' render', но я запускаю этот метод '.bind' в' componentWillMount' и, похоже, ничего не делает. – sanjaypoyzer

@sanjaypoyzer Вы могли бы разместить больше кода? потому что мой пример просто показывает, как вы можете использовать '.bind' в компоненте реакции –

Какие еще биты вы хотите? Соответствующие биты, похоже, будут делать то, что у вас есть на скрипке. нотабене 'console.log (data)' вместо 'this.setState' отлично работает, поэтому я подозреваю, что проблема связана с переменной' this'. – sanjaypoyzer

Никогда не выполнять Ajax вызова в componentWillMount.

Сделайте это в компонентеDidMount.

Также есть проблема с областью, для которой используется то, что Александр предлагает (связывает). Другая возможность заключается в том:

componentDidMount: function() { 
    var self = this; 
    twitter.get('statuses/user_timeline', function(error, data) { 
     self.setState({tweets: data}) 
    }); 
}

Также более подробно здесь http://facebook.github.io/react/tips/initial-ajax.html (уже подчеркнутые Klimo в комментариях)

источник

2015-12-05 21:20:00

Спасибо за упоминание, Франсуа. Чтобы кратко добавить ваш ответ, вы можете использовать стрелку жира ES6, чтобы избежать связывания или 'self = this' в целом:' (ошибка, данные) => {... '(вам понадобится транспилер вроде Babel). –

'componentDidMount', кажется, не срабатывает вообще для меня. Мой код: 'getInitialState: функция() { возврата ({твиты: 'getInitialState'})} , componentDidMount: функция() { twitter.get ('статусы/user_timeline', функция (ошибка, данные) { this.setState ({tweets: 'callback'}) console.log ('callback') } .bind (this)); this.setState ({твиты: 'componentDidMount'}) console.log ('componentDidMount') } ' оказывает 'getInititialState' – sanjaypoyzer

поставить код в вопросе больно глаза чтение это так –

Есть 2 способа, поставив его в componentDidMount, вы можете решить проблему:

1. Привязка эта область к функции

.bind (это)

twitter.get('statuses/user_timeline', function(error, data) { 
    this.setState({tweets: data}) 
}).bind(this);

2. Использование жира стрелка

twitter.get('statuses/user_timeline', (error, data) => { 
    this.setState({tweets: data}) 
});

источник

2017-10-09 07:35:30

Использование this.setState в функции обратного вызова

ответ

Смежные вопросы