Реагируйте SetState и отправка не работает на функцию click

Question

Я надеюсь, что кто-нибудь поможет мне получить Content-Range с сервера и преобразовать строку в нумерацию страниц

Например: когда я звоню

sitesActions.getAll ()

Мое действие возвращается

 sites:
  acceptRange:"10"
  contentRange:"0-9/25"
  data:(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}..]

Диапазон содержимого: 0-9 / 25

Accept-Range: 10 (Максимальный возвращенный сбор)

Этот результат заставляет меня генерировать массив разбивки на страницы, как в этом примере

Функция деталей пагинации генерирует массив нумерации страниц

function paginationDetails(contentRange, acceptRange) {

    console.log('content', contentRange);
    let paginationDetails = contentRange.split("/");
    let allCollection = parseInt(paginationDetails[1]);
    let numberReturnedData = acceptRange;
    let paginationNbr = Math.ceil(allCollection/numberReturnedData);
    let rows = [{
        pageNumber : 1 ,
        startData : 0,
        endData:  numberReturnedData-1
    }]

    for (let i = 1; i < paginationNbr; i++) {
        let end = (numberReturnedData-1)+(Number(i)*numberReturnedData);
            rows.push(
                {
                    pageNumber: Number(i)+1, 
                    startData : numberReturnedData*Number(i), 
                    endData: (end>allCollection) ? allCollection : end ,
                }

            );
    }
    console.log(rows);
    return rows;
}

Массив нумерации страниц

[{pageNumber: 1, startData: 0, endData: 9}

{номер страницы: 2, данные начала: 10, данные конца: 19}

{номер страницы: 3, данные начала: 20, данные конца: 25}]

Сделать глобальную разбивку по компонентам и повторно использовать их в каждом компоненте я добавляю в родительский компонент click = {sitesActions.getAllWithRange}

Действие Получить все с диапазоном

function getAllWithRange(start, end) {
    return dispatch => {
        dispatch(request());
        sitesService.rangeSites(start, end)
            .then(
                sites => dispatch(success(sites)),
                error => {
                    dispatch(failure(error));
                    dispatch(alertActions.error('Error fetching site data'));
                }
            );
    };

    function request() { return { type: sitesConstants.SITES_REQUEST } }
    function success(sites) { return { type: sitesConstants.SITES_SUCCESS, sites } }
    function failure(error) { return { type: sitesConstants.SITES_FAILURE, error } }
}

поэтому я отправляю этот реквизит и использую его в нумерации страниц, используя

dispatch(this.props.click(elementInfo.startData, elementInfo.endData));

Компонент нумерации страниц

<PaginationManager
        click={sitesActions.getAllWithRange}
        paginationInfo={paginationDetails(sites.items.contentRange, sites.items.acceptRange)} />

        </Aux>

Файл родительского компонента

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Aux} from '../hoc';
import {paginationDetails} from '../helpers';
import { sitesActions } from '../actions/sitesActions';
import classes from './BillsManager.css';
import PaginationManager from './PaginationManager';


class SitesManager extends Component {

    componentDidMount() {
        this.props.dispatch(sitesActions.getAll());
    }

    goToSite(siteLink) {
            window.open('http://'+siteLink, '_blank');
    }

    render(){
        const { sites } = this.props;

        return(
        <Aux>
            <h1>Sites</h1>
            <p>You can see all details of your sites.</p> 
            {sites.loading && <em>Loading sites...</em>}
            {sites.items && <Aux>
                <table className="table table-bordered">
                <thead >
                    <tr>
                        <th>Site</th>
                        <th>Date</th>
                        <th>Status</th>
                        <th>Renew</th>
                    </tr>
                </thead>
                <tbody>
                            {sites.items.data.map((site, index) =>
                                <tr key={site.id}>
                                    <th>{site.main_domain}</th>
                                    <th>{site.CreatedTime}</th>
                                    <th>{site.ps_status}</th>
                                    <th className={classes.Link} onClick={() =>this.goToSite(site.main_domain)}><i className='fa fa-globe'></i></th>
                                </tr>
                            )}
                </tbody>
                </table>

                <PaginationManager
                click={sitesActions.getAllWithRange}
                paginationInfo={paginationDetails(sites.items.contentRange, sites.items.acceptRange)} />

                </Aux>

            }

        </Aux>
        )
    }
}

function mapStateToProps(state, ownProps) { 
    return {
        sites : state.sites 
    };
  }




export default connect(mapStateToProps)(SitesManager);

Файл компонента разбиения на страницы

import React, {Component} from 'react'
import {connect} from 'react-redux';

class PaginationManager extends Component {

    constructor(props) {
        super(props)
        this.state = {
            activePage : this.props.paginationInfo[0],
            activeIndex: 0
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick = (elementInfo, index)  => {
        const { dispatch } = this.props;
        dispatch(this.props.click(elementInfo.startData, elementInfo.endData));
        this.setState({
            activePage : elementInfo,
            activeIndex: index
        })
    }

    render() {
        let isDisabledPrevious = (this.state.activeIndex === 0) ? 'disabled' : ''; 
        let isDisabledNext = (this.props.paginationInfo.length-1 === this.state.activeIndex) ? 'disabled' : ''; 

        return ( <nav aria-label="Page navigation example">
                 <ul className="pagination justify-content-center">
                     <li className={`page-item ${isDisabledPrevious}`}>
                     <a className="page-link" 
                        onClick={() => this.handleClick(this.props.paginationInfo[this.state.activeIndex-1]
                        ,this.state.activeIndex-1)} >Previous</a>
                     </li>
                         {this.props.paginationInfo && this.props.paginationInfo.map((pageInfo, index) => {

                           return <li key={pageInfo.pageNumber} className={`page-item  ${(this.state.activePage.pageNumber === pageInfo.pageNumber) ? 'active' : ''}` }>
                                <a className="page-link"  onClick={() =>this.handleClick(pageInfo, index)} >{pageInfo.pageNumber}</a>
                             </li>
                             })
                         }
                       <li className={`page-item ${isDisabledNext}`}>
                       <a className="page-link" 
                        onClick={() => this.handleClick(this.props.paginationInfo[this.state.activeIndex+1]
                        ,this.state.activeIndex+1)} >Next</a>
                     </li>
                 </ul>
         </nav>);
     }
};


export default connect()(PaginationManager);

Я потратил слишком много времени, пытаясь решить эту проблему, но я не знаю, почему setState не работает. Нумерация страниц работает нормально, setState работает и возвращает обновленные значения, когда я комментирую dispatch(this.props.click(elementInfo.startData, elementInfo.endData));