简而言之:我正在从具有 X 个对象的 API 中获取 21 个 JSON 对象,然后我想在用户向下滚动页面时从 API 中获取接下来的 21 个对象。我已经尝试了多种选择,但都没有成功,我最后的选择是请教这里聪明的开发人员。
我以前从未尝试过这个,所以如果有人愿意展示一个技巧/解决方案,用我的组件做一个例子,那将不胜感激!
我试过使用 https://github.com/RealScout/redux-infinite-scroll ,但我无法理解它。
这是我的组件,我在其中获取 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 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>
)
}
}
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)
最佳答案
你可以看看这篇文章:
To Infinity and Beyond with React Waypoint - 无限滚动与 React Waypoint
使用 react-waypoint 的直接方法非常容易理解.
https://brigade.engineering/to-infinity-and-beyond-with-react-waypoint-cb5ba46a9150#.ftcyb9ynp
此外,还有一个供您引用:http://brigade.github.io/react-waypoint/#infinite-scroll
希望这会有所帮助:)
关于javascript - React/Redux - 无限滚动/从 API 加载更多,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42796512/