React中超出了最大调用堆栈大小

Question

这是我自制的React分页器代码：

import React from 'react';

var Paginator = React.createClass({
componentWillReceiveProps: function (nextProps, nextState) {
    this.setState({
        pages: this.getPagesArray(nextProps),
    });

},
getDefaultProps: function () {
    return {
        perPage: '',
        getItems: '',
    }
},
getInitialState: function () {
    return {
        pages: [],
        currentPage: 1,
    }
},
getPagesArray: function (props) {
    var pages = [];

    for (var i = 0; i < props.items.length / props.perPage; i++) {
        pages.push(i + 1)
    }

    return pages;
},
getItemsForPage: function (page) {
    var first = this.props.perPage * (page - 1);
    var last = this.props.perPage * page;

    return this.props.items.slice(first, last);
},
updateItemsToShow: function (page = 1) {
    this.setState({
        currentPage: page,
    });
    var items = this.getItemsForPage(page);

    this.props.getItems(items);

    return items;
},
render() {
    return (
        <div>
            { this.props.items.length > this.props.perPage ?
                <nav aria-label="Page navigation">
                    <ul className="pagination">
                        <li>
                            <a
                                onClick={this.updateItemsToShow.bind(null, 1)} href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {this.state.pages.map(function (page) {
                            return <li
                                className={this.state.currentPage == page ? 'active' : ''} key={page}><a
                                onClick={this.updateItemsToShow.bind(null, page)}>{page}</a>
                            </li>
                        }, this)}
                        <li>
                            <a onClick={this.updateItemsToShow.bind(null, this.state.pages[this.state.pages.length - 1])}
                               aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
                : null
            }
        </div>
    );
}
});

export default Paginator;

我的问题是我无法在开始时拨打this.updateItemsToShow。我总是收到Maximum call stack size exceeded. 我已经尝试了所有的生命周期方法，如：componentDidMount，componentWillUpdate等...我也将项目传递给父组件来显示它们。如果我单击我的按钮，onClick成功调用该方法。 html页面完全加载后显示第一页的问题。截至目前，只显示按钮。

Paginator类仅显示按钮并计算要发送回父组件的项目。

修改

我正在使用我不太优雅的解决方案添加我的父项：

import React from 'react'; 
import ReactDOM from 'react-dom';
import  Tasks from './Tasks.js';
import  TaskControl from './task-control.js';
import  EditTask from './task-edit.js';
import  Paginator from '../Paginator.js';


var TasksShow = React.createClass({
componentDidMount: function () {
    $.get('/ajax/getStudioTasks', function (result) {
        this.setState({
            studioTasks: JSON.parse(result),
            studioTasksToShow: JSON.parse(result).slice(0, this.props.perPage),
        });
    }.bind(this));
    $.get('/ajax/getUserTasks', function (result) {
        this.setState({
            userTasks: JSON.parse(result),
            userTasksToShow: JSON.parse(result).slice(0, this.props.perPage)
        })
        ;
    }.bind(this));
},


getDefaultProps: function () {
    return {
        perPage: 10,
    }
},


getInitialState: function () {

    return {
        task: {
            id: '',
            title: '',
            description: '',
            deadline: '',
            from: {name: '', id: ''},
            to: {name: '', id: ''},
            studio: {name: '', id: ''},
            finished: '',
            finishDate: '',
            expired: '',
            almostExpired: '',
        },
        showTask: false,
        editTask: false,
        userTasks: [],
        userTasksToShow: [],
        studioTasks: [],
        studioTasksToShow: [],
    }
},
showTask: function (task) {
    this.setState({
        showTask: true,
        editTask: false,
        task: task
    });

},
hide: function () {
    this.setState({
        showTask: false,
        editTask: false
    });
},
editTask: function (task) {
    this.setState({
        showTask: false,
        editTask: true,
    });
},
updateStudioTasks: function (tasks) {
    this.setState({
        studioTasksToShow: tasks
    });

},
updateUserTasks: function (tasks) {
    this.setState({
        userTasksToShow: tasks
    });
},
render() {
    return (
        <div>
            {this.state.showTask ?
                <TaskControl edit={this.editTask} hide={this.hide} task={this.state.task}/>
                : null}
            {this.state.editTask ?
                <EditTask hide={this.hide} task={this.state.task}/>
                : null}
            <div className="row margin-top">
                <div className="col-md-6">
                    <Tasks tasks={this.state.studioTasksToShow} title='Studio aufgabe' onClick={this.showTask}/>
                </div>
                <div className="col-md-6">
                    <Tasks tasks={this.state.userTasksToShow}     title='Benutzer aufgabe' onClick={this.showTask}/>
                </div>
            </div>
            <div className="container">
                <div className="row">
                    <div className="col-md-6 text-center">
                        <Paginator perPage={this.props.perPage} items={this.state.studioTasks}
                                   getItems={this.updateStudioTasks}/>
                    </div>

                    <div className="col-md-6 text-center">
                        <Paginator perPage={this.props.perPage} items=         {this.state.userTasks}
                                   getItems={this.updateUserTasks}/>
                    </div>
                </div>
            </div>
        </div>
    );
}
 });


 ReactDOM.render(
<TasksShow />
,
document.getElementById('tasks-show')
 );