Не работает опрос в React JS mixin
Итак, я создал следующий миксин:
var Polling = {
startPolling: function() {
var self = this;
setTimeout(function() {
self.poll();
if (!self.isMounted()) {
return;
}
self._timer = setInterval(self.poll(), 15000);
}, 1000);
},
poll: function() {
if (!this.isMounted()) {
return;
}
var self = this;
console.log('hello');
$.get(this.props.source, function(result) {
if (self.isMounted()) {
self.setState({
error: false,
error_message: '',
users: result
});
}
}).fail(function(response) {
self.setState({
error: true,
error_message: response.statusText
});
});
}
}
Обратите внимание console.log('hello');
в poll
функция. Я должен видеть это каждые 15 секунд в соответствии с этой логикой.
Теперь давайте посмотрим на компонент реакции:
//= require ../../mixins/common/polling.js
//= require ../../mixins/common/state_handler.js
//= require ../../components/recent_signups/user_list.js
var RecentSignups = React.createClass({
mixins: [Polling, StateHandler],
getInitialState: function() {
return {
users: null,
error_message: '',
error: false
}
},
componentDidMount: function() {
this.startPolling();
},
componentWillUnmount: function() {
if (this._timer) {
clearInterval(this._timer);
this._timer = null;
}
},
shouldComponentUpdate: function(nextProps, nextState) {
if (this.state.users !== nextState.users ||
this.state.error !== nextState.error ||
this.state.error_message !== nextState.error_message) {
return true;
}
return false;
},
renderContents: function() {
if (this.state.users === null) {
return;
}
return (
<div>
<ul>
<UserList users={this.state.users} />
</ul>
</div>
);
},
render: function() {
return (
<div>
{this.loading()}
{this.errorMessage()}
{this.renderContents()}
</div>
)
}
});
RecentSignupsElement = document.getElementById("recent-signups");
if (RecentSignupsElement !== null) {
ReactDOM.render(
<RecentSignups source={ "http://" + location.hostname + "/api/v1/recent-signups/" } />,
RecentSignupsElement
);
}
Здесь мы видим в componetDidMount
функция, которую я вызываю this.startPolling
Когда страница загружается, то, что я вижу через 1 секунду:
hello
hello
- А) его (
poll
функционал) кое как звонил дважды oO. - Б) его (
poll
функция) никогда не вызывается снова.
Причина, по которой я разделил опрос, состоит в том, что я могу использовать его в других компонентах на той же странице, а не в дублирующем коде.
Очень просто вопрос (ы):
Почему и как мне это исправить? Мне нужно, чтобы опросить каждые 15 секунд, и я должен только видеть hello
однажды, когда poll
называется первый раз.
2 ответа
В этой строке вы вызываете self.poll(), и результатом будет таймер:
self._timer = setInterval(self.poll(), 15000);
Вместо этого передайте функцию:
self._timer = setInterval(self.poll, 15000);
В качестве другого варианта, в духе "ваш код не работает? Просто используйте чужой!", Response-async-poll - это удобная оболочка для компонентов, которую вы можете использовать для опроса.