我希望有人能帮助我从服务器获取Content-Range并将字符串转换为分页
例如：当我打电话
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;
}
分页数组
[{pageNumber：1，startData：0，endData：9}
{pageNumber：2，startData：10，endData：19}
{pageNumber：3，startData：20，endData：25}]
使分页成为Componenet Global，并在每个组件中重用 我将其添加到父组件中 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不起作用。仅当我注释dispatch(this.props.click(elementInfo.startData, elementInfo.endData));