Я хочу внедрить на своем веб-сайте реагирующий бесконечный скроллер, но у меня возникают проблемы с загрузкой новых данных после достижения нижней части моего сайта. Мое приложение всегда отображает все мои элементы уже в начале. Он должен загружать только первые несколько, а затем, достигнув дна, загрузить больше элементов
Вот мой
Fetch:
loadContent() {
var requestUrl = '//api.jsonbin.io/b/5bba8ec46d95da7b7a759251/14';
fetch(requestUrl).then((response)=>{
return response.json();
}) .then((data, response)=>{
this.setState({tracks : data});
}).catch((err)=>{
console.log("There has been an error");
});
}
И здесь я отображаю массив:
var items = [];
this.state.tracks.map((title, i) => {
items.push(
<div key={title.id}>
<Item
key={title.id}
title={title.title}/>
</div>
);
});
И это мое возвращение с бесконечным свитком:
return (
<InfiniteScroll
pageStart={0}
loadMore={this.loadContent.bind(this)}
hasMore={this.state.hasMoreItems}
loader={loader}
>
<div className="tracks" >
{items}
</div>
</InfiniteScroll>
)
Есть ли у вас какие-либо предложения или помощь для меня?
Был бы признателен:)
С наилучшими пожеланиями
EDIT:
Вот как выглядит мой API:
[
{
"kik": ".",
"telegram": ".",
"twitter": ".",
"slack": ".",
"discord": ".",
"messenger": "https://www.messenger.com/t/dontfeatit",
"description": "We challenge you to improve you health by fasting...",
"image": "https://botlist.co/media/17857/c/42743635_250193639002714_5041958715473788928_n-medium.jpg",
"userId": 1,
"title": "Don't Fucking Eat It",
"body": "Fasting to improve your health or help feed those in need.",
"id": 1
},
{
"kik": ".",
"telegram": ".",
"twitter": ".",
"slack": "https://fyrebox.slack.com/",
"discord": ".",
"messenger": "https://www.messenger.com/t/fyrebox",
"description": "Fyrebox make...",
"image": "https://botlist.co/media/17814/c/fyrebox-medium.jpg",
"userId": 1,
"title": "Fyrebox Quiz Bot",
"body": "Create a quiz playable as a bot in Messenger and/or Slack",
"id": 2
}
]