Question

我想对我的网站实施react-infinite-scroller，但是在到达网站底部后加载新数据时遇到问题。我的应用程序一开始总是显示我所有的元素。它应该只加载前几个元素，然后在到达底部之后，加载更多元素... 这是我的 获取：

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>

    )

您对我有什么建议或帮助吗？会很感激的：）

最好的问候

编辑：

这是我的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
  }
 ]

Reactjs无限滚动/将数据添加到数组

0 个答案: