Question

简而言之：我从API获取X JSON对象，但我只想显示前20个对象，然后如果用户决定，则可以获取另外20个对象。什么是最好的方法呢？

这是我的组件，我在componentDidMount上获取所有团队，然后从我的reducer中获取所有JSON对象：

import React, { Component } from 'react'
import { APIManager, DateUtils, YouTubeID } from '../../utils'
import actions from '../../actions'
import { connect } from 'react-redux'
import  { Link, browserHistory } from 'react-router'


class teams extends Component {
  constructor () {
    super()
    this.state = {

    }
  }

  selectTeam(team, event){
  event.preventDefault()
  this.props.selectTeam(team)
 }

  componentDidMount(){
    if(this.props.teams != null){
      return
    }
    this.props.fetchTeams()
  }

  componentDidUpdate(){
    if(this.props.teams != null){
      return
    }
    this.props.fetchTeams()
  }

  render(){
    return(
      <div id="wrap">
        <div style={{height: '65px'}} className="hero hero-teams-2">
        <div className="hero-inner group">
          <h1 className="center title-long">
            <strong>Pro CS:GO </strong>
            Teams
          </h1>
        </div>
      </div>

  <div style={{paddingTop: '0px'}} id="wrap-inner">
    <div id="content" role="main">

<div id="main" className="main-full">
  <div className="group">


    <div style={{marginLeft: '150px'}} className="portal-group designers">

      <h3 style={{marginLeft: '40%'}} className="jump">
        <a href="#">Select A Team</a>
      </h3>

      <div className="scrollable-content-container">
        <ol className="portal-list-members debutants scrollable">

{(this.props.teams == null) ? null :
  this.props.teams.map((team, i) => {

    return (
      <li onClick={this.selectTeam.bind(this, team.teamname)} key={i} className="group">
        <h3>
        <Link to={'/team'} style={{color: '#444', textTransform: 'capitalize'}} className="url hoverable" href="#">
          <img style={{height: '160px', width: '160px'}} className="photo" src={"images/"+team.image}/>
        {team.teamname}
      </Link>
      </h3>
    </li>
    )
  })
}
</ol>
      </div>
    </div>
  </div>
</div>

    </div>
  </div>
</div>
    )
  }
}

const stateToProps = (state) => {
  return {
      teams: state.players.teams
  }
}

const dispatchToProps = (dispatch) => {
  return {
    selectTeam: (team) => dispatch(actions.selectTeam(team)),
    fetchTeams: (params) => dispatch(actions.fetchTeams(params))
  }
}

export default connect(stateToProps, dispatchToProps)(teams)

Mongo查询

router.get('/liveTeams', function(req, res, next){
  Team.find({})
  .where('status', 'live')
    .sort({timestamp : -1})
  .exec(function(err, results){
    if(err) return next(err);
    res.json({
      confirmation: 'success',
      results: results
    })
  });
});

Answer 1

MongoDB有一个额外的方法：.limit(20)你可以添加，所以你只能获得最多20条记录。

然后，您还可以使用.skip()方法跳过以前的记录。因此，如果排序始终相同，则使用：

Team.find({}).where('status', 'live').sort({timestamp : -1}).skip(0).limit(20) 第一次。

下一个电话会是： Team.find({}).where('status', 'live').sort({timestamp : -1}).skip(20).limit(20)

等等。

ReactJS - 从REST API中分页/加载更多内容

1 个答案: