React.js - 将 JSON 返回与分页分开 [关闭]答案

【问题标题】：React.js - Separate the JSON return with pagination [closed]React.js - 将 JSON 返回与分页分开 [关闭]
【发布时间】：2018-09-11 11:54:56
【问题描述】：

我在下面有这个组件，它工作正常。但我想在 JSON 返回的项目上插入分页，比如每页 6 张照片。我该如何解决？谢谢。

import React, { Component } from 'react'
import axios from 'axios'

const URL_HOUSES = 'http://localhost:3001/houses';

class Houses extends Component {
  constructor(props) {
  super(props)
  this.state = {
    houses: []
  }
}

componentDidMount() {
  axios.get(URL_HOUSES)
    .then(res => {
      this.setState({ houses: res.data })
    })
  }

render() {
  return (
    <div>
      {this.state.houses.map(item =>             
          <ul>
            {
              item.photos.map(photo => <li>{photo}</li>)
            }
          </ul>           
      )}
     </div>
   )
 }
}

 export default Houses;

【问题讨论】：

标签： json reactjs pagination

【解决方案1】：

试试这个

    import React, { Component } from 'react'
import axios from 'axios'

const URL_HOUSES = 'http://localhost:3001/houses';

class Houses extends Component {
  constructor(props) {
  super(props)
  this.state = {
    houses: [],
    currentPage: 1 //On Page change event increment this
  }
}

componentDidMount() {
  axios.get(URL_HOUSES)
    .then(res => {
      this.setState({ houses: res.data })
    })
  }

render() {
  var pageEnd = this.state.currentPage * 6;
  var pageStart = pageEnd - 6

  return (
    <div>
        //slice the array based on the current page
      {this.state.houses.slice(pageStart, pageEnd - 1).map(item =>             
          <ul>
            {
              item.photos.map(photo => <li>{photo}</li>)
            }
          </ul>           
      )}
     </div>
   )
 }
}

 export default Houses;

可能在语法上不正确并且缺少一些检查，但我希望你能明白

【讨论】：

【解决方案2】：

 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。想法是通用的。您可以阅读代码并理解 .如有任何疑问，请告诉我

【讨论】：