Javascript 轮询在React JS mixin中不起作用
因此,我创建了以下mixin:Javascript 轮询在React JS mixin中不起作用,javascript,reactjs,polling,ajax-polling,Javascript,Reactjs,Polling,Ajax Polling,因此,我创建了以下mixin: var Polling = { startPolling: function() { var self = this; setTimeout(function() { self.poll(); if (!self.isMounted()) { return; } self._timer =
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
功能中选择code>。根据这个逻辑,我应该每15秒看到一次
现在让我们看一个react组件:
//= 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
);
}
- A)它的(
poll
function)是如何被调用两次的
- B)其(
poll
函数)再也不会被调用
我将轮询分离出来的原因是,我可以在同一页面上的其他组件中使用它,而不是重复代码
非常简单的问题:
为什么以及如何修复此问题?我需要它每隔15秒轮询一次,当第一次调用poll
时,我应该只看到hello
一次。在这一行中,您调用self.poll(),结果将是计时器:
self._timer = setInterval(self.poll(), 15000);
而是传递函数:
self._timer = setInterval(self.poll, 15000);
作为另一种选择,本着“您的代码不起作用?只需使用其他人的代码就可以了!”的精神,这是一个方便的组件包装器,您可以使用它进行轮询
self._timer = setInterval(self.poll, 15000);