Reactjs Infinite Scroll / Добавить данные в массив - PullRequest
0 голосов
/ 07 ноября 2018

Я хочу внедрить на своем веб-сайте реагирующий бесконечный скроллер, но у меня возникают проблемы с загрузкой новых данных после достижения нижней части моего сайта. Мое приложение всегда отображает все мои элементы уже в начале. Он должен загружать только первые несколько, а затем, достигнув дна, загрузить больше элементов Вот мой 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
  }
 ]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...