轮询在React JS mixin中不起作用

Question

所以我创建了以下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
            });
        });
    }
}

注意poll函数中的console.log('hello');。根据这个逻辑，我应该每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
    );
}

在这里我们看到在componetDidMount函数我调用this.startPolling当页面加载时，我看到1秒后是:

hello
hello

• A)其(poll函数)如何被调用两次oO.
• B) its (poll函数)永远不会再被调用。

我分开轮询的原因是，我可以在同一页面上的其他组件中使用它，而不是重复的代码。

非常简单的问题:

我为什么和如何解决这个问题?我需要它每15秒轮询一次，当poll第一次被调用时，我应该只看到hello一次。

Answer 1

在这一行中调用self.poll()，结果将是计时器:

self._timer = setInterval(self.poll(), 15000);

而不是传递函数:

self._timer = setInterval(self.poll, 15000);

Answer 2

作为另一种选择，本着"你的代码不工作?， react-async-poll是一个方便的组件包装器，您可以使用它来进行轮询。