代码之家  ›  专栏  ›  技术社区  ›  claudiopb

反应js-使用分页分隔JSON返回[关闭]

  •  1
  • claudiopb  · 技术社区  · 7 年前

    我有下面这个组件,它工作得很好。但我想在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;
    
    2 回复  |  直到 7 年前
        1
  •  1
  •   Mohit Mutha    7 年前

    试试这个

        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
  •  1
  •   simbathesailor    7 年前
     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。想法是通用的。您可以阅读代码并理解。如果有任何疑问,请告诉我