Kurz gesagt: Ich hole 21 JSON-Objekte von einer API mit X Menge von Objekten, ich möchte dann die nächste 21 Objekte aus der API holen, wenn der Benutzer scrollt auf der Seite. Ich habe mehrere Möglichkeiten ohne Glück ausprobiert, und meine letzte Option ist es, die cleveren Entwickler hier zu fragen.React/Redux - Infinite Scrolling/laden mehr aus API
Ich habe das noch nie zuvor versucht, also wenn jemand freundlich wäre und einen Tipp/eine Lösung vorführt, ein Beispiel aus meiner Komponente machend, würde das sehr geschätzt werden!
Ich habe versucht mit https://github.com/RealScout/redux-infinite-scroll, aber ich kann nicht meinen Kopf darum wickeln.
Hier ist meine Komponente, wo ich alle Teams auf componentDidMount bin holen und dann alle JSON-Objekte aus meinem Minderer bekommen:
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)