我的分頁正在做一些奇怪的事情。我使用react-pager。分頁與反應
當我點擊第一頁 - 我沒有任何項目(但我聽從他們),當我點擊第二頁時,我有4個項目,當我點擊第三頁時,我的項目剛剛添加到項目從第二頁開始。我的意思是在第三頁上,我有8件舊+新品,而不是像我一樣注意的4件新品。 我覺得片中有些問題。
成分進行:
import React, {Component} from 'react';
import {connect} from 'react-redux';
import Pager from 'react-pager';
class AlbumsShow extends Component {
constructor(props) {
super(props);
this.renderImage = this.renderImage.bind(this);
this.handlePageChanged = this.handlePageChanged.bind(this);
this.state = {
total: 3,
current: 1,
visiblePage: 2,
};
}
handlePageChanged(newPage) {
this.setState({ current : newPage });
}
renderImage() {
return this.props.images.slice((this.state.current-1), this.state.current * 4).map(image => (
<li key={image.id}>
<img className="album_img" alt="job" src={image.img} />
<p className="album_title">Test</p>
</li>
));
}
render() {
return (
<div>
<div>
{this.renderImage()}
</div>
<Pager
total={this.state.total}
current={this.state.current}
visiblePages={this.state.visiblePage}
titles={{ first: '<|', last: '>|' }}
className="pagination-sm pull-right"
onPageChanged={this.handlePageChanged}
/>
</div>
);
}
}
function mapStateToProps(state, ownProps) {
const currentAlbumId = parseInt(ownProps.params.id, 10);
return {
images: state.main.albums.filter(album => album.id === currentAlbumId)[0].images,
};
}
export default connect(mapStateToProps)(AlbumsShow);
另外,如果我將有更多的10個項目我的分頁應該是可見的,如果小於10 - 空,但我的條件不工作壓力太大。例如:
{this.renderImage() > 10 ?
<Pager
total={this.state.total}
current={this.state.current}
visiblePages={this.state.visiblePage}
titles={{ first: '<|', last: '>|' }}
className="pagination-sm pull-right"
onPageChanged={this.handlePageChanged}
/>: null }
它可以幫助和我的項目不添加到對方,但我的第一頁仍然是空的。 –
分頁工作,謝謝。 我還有一個關於條件的問題: 當我把你的編輯粘貼到我的代碼中時,我的物品消失了,但控制檯很清晰。 –
你的意思是當你有少於10張圖片時,你會顯示0張圖片嗎?如果是這樣,這是正常的,因爲如果條件爲假,則返回null。我將編輯我的答案,告訴你如何去做。 –