class Houses extends Component {
constructor(props) {
super(props)
this.state = {
houses: [],
pageSize: 6,
currentPage: 1,
}
}
componentDidMount() {
axios.get(URL_HOUSES)
.then(res => {
this.setState({ houses: res.data })
})
}
render() {
const { houses,pageSize, currentPage } = this.state
const pageNo = Math.floor(houses.length / pageSize)
const housesToDisplay = houses.slice((pageNo-1) * pageSize, ((pageNo-1) * pageSize) + pageSize))
return (
<div>
{housesToDisplay.map(item =>
<ul>
{
item.photos.map(photo => <li>{photo}</li>)
}
</ul>
)}
</div>
)
}
}
export default Houses;
所以以上的实现是基本的实现。它可能有一些边缘情况,您需要小心。还有一件事,您需要添加分页按钮,并将事件处理程序附加到按钮上,该按钮将在反应状态下更新currentPage。想法是通用的。您可以阅读代码并理解。如果有任何疑问,请告诉我