Reactjs React SetState和dispatch not working onClick功能

我希望有人能帮助我从服务器获取内容范围，并将字符串转换为分页

例如：当我打电话时

sitesActions.getAll（）

我的操作返回

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

内容范围：0-9/25

接受范围：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;
}

所以我分派这个道具，并使用

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

分页组件

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

        </Aux>

父组件文件

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 } }
}

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);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../hoc”导入{Aux}；
从“../helpers”导入{paginationDetails}；
从“../actions/sitesActions”导入{sitesActions}；
从“/BillsManager.css”导入类；
从“./PaginationManager”导入分页管理器；
类SitesManager扩展组件{
componentDidMount（）{
this.props.dispatch（sitesActions.getAll（））；
}
goToSite（站点链接）{
window.open（'http://'+siteLink，'u blank'）；
}
render（）{
const{sites}=this.props；
返回(
地点
您可以查看站点的所有详细信息。

{sites.loading&&loading sites…}
{sites.items&&
场地
日期
地位
更新
{sites.items.data.map（（site，index）=>
{site.main_domain}
{site.CreatedTime}
{site.ps_status}
this.goToSite（site.main_domain）}>
)}
}
)
}
}
函数mapStateToProps（状态，ownProps）{
返回{
站点：state.sites
};
}
导出默认连接（MapStateTrops）（站点管理器）；

分页组件文件

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 } }
}

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);

import React，{Component}来自“React”
从'react redux'导入{connect}；
类分页管理器扩展组件{
建造师（道具）{
超级（道具）
此.state={
activePage:this.props.paginationInfo[0]，
活动索引：0
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick=（elementInfo，index）=>{
const{dispatch}=this.props；
分派（this.props.click（elementInfo.startData，elementInfo.endData））；
这是我的国家({
activePage:elementInfo，
活动索引：索引
})
}
render（）{
让isDisabledPrevious=（this.state.activeIndex==0）？“已禁用”：“”；
让IsDisableNext=（this.props.paginationInfo.length-1==this.state.activeIndex）？“已禁用”：“”；
报税表（


this.handleClick（this.props.paginationInfo[this.state.activeIndex-1]
，this.state.activeIndex-1）}>Previous

{this.props.paginationInfo&&this.props.paginationInfo.map（（pageInfo，index）=>{
return

this.handleClick（pageInfo，index）}>{pageInfo.pageNumber}

})
}

this.handleClick（this.props.paginationInfo[this.state.activeIndex+1]
，this.state.activeIndex+1）}>Next


);
}
};
导出默认连接（）（分页管理器）；

---

我花了太多时间试图解决这个问题，但我不知道为什么设置状态不起作用。分页工作正常，setState工作并返回更新的值，就在我对

分派进行注释时（this.props.click（elementInfo.startData，elementInfo.endData））
这里有很多代码。你能把它缩减成一个MCVE吗？谢谢你的回复，我会再试试简历；）更新：恢复完成控制台是否显示任何错误？没有，没有错误，但当i console.log状态不变时