javascript - React JS - 在数组末尾停止无限滚动

Question

我有一个简单的 React 应用程序，我可以在其中获取 Flickr 公共(public)源。因此，我可以滚动到页面末尾，新内容将显示。因此，我想滚动，直到没有其他新内容，并且应用程序停止尝试加载更多内容，因为它已到达列表的最后一项，如果我尝试滚动，则不会发生这种情况(您可以在加载消息)。我怎样才能解决这个问题？

检查下面的代码:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import $ from "jquery";

import PhotoListItem from "./photoListItem";

import "./photoApp.css";

export default class PhotoApp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      photoList: [],
      searchTerm: "cyanotype",
      items: 8,
      loadingState: false,
      loadingMessage: ""
    };
  }

  componentDidMount() {
    this.getPhotoList();
    this.onInfiniteScroll();
  }

  /* get data from Flickr public feed */
  getPhotoList = () => {
    const flickrApiPoint =
      "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&tags=" +
      this.state.searchTerm;

    try {
      $.ajax({
        url: flickrApiPoint,
        dataType: "jsonp",
        data: { format: "json" },
        success: function(data) {
          this.setState({ photoList: data.items });
        }.bind(this)
      });
    } catch (err) {
      console.log(err);
    }
  };

  /* code for infinite scroll */
  onInfiniteScroll = () => {
    this.refs.iScroll.addEventListener("scroll", () => {
      if (
        this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight >=
        this.refs.iScroll.scrollHeight - 20
      ) {
        this.loadMoreItems();
      }
    });
  };

  /* code for infinite scroll */
  loadMoreItems = () => {
    if (this.state.loadingState) {
      return;
    }

    this.setState({
      loadingState: true,
      loadingMessage: "Loading photos..."
    });
    setTimeout(() => {
      this.setState(prevState => ({
        items: prevState.items + 8,
        loadingState: false,
        loadingMessage: "No more photos to show."
      }));
    }, 1000);
  };

  render() {
    console.log(this.state.photoList)
    return (
      <div className="appContainer" ref="iScroll">
        <div className="appHeader">
          <h1 className="headerTitle">
            Welcome to Flickr Alternative Photography Feed!
          </h1>
        </div>

        <div className="gridContainer">
          {this.state.photoList
            .slice(0, this.state.items)
            .map((photo, index) => {
              const author = photo.author.split(/"/)[1];
              const authorLink = photo.description.split(/"/)[1];
              const description = photo.description.split(/"/)[13];
              return (
                <PhotoListItem
                  key={index}
                  url={photo.media.m}
                  photoLink={photo.link}
                  title={photo.title}
                  author={author}
                  authorLink={authorLink}
                  description={description}
                  tags={photo.tags}
                />
              );
            })}
        </div>

        <React.Fragment>
          {this.state.loadingState ? (
            <p className="loading">{this.state.loadingMessage}</p>
          ) : (
            <p className="loading">{this.state.loadingMessage}</p>
          )}
        </React.Fragment>
      </div>
    );
  }
}

LIVE EXAMPLE HERE

谢谢!

Answer 1

您可以检查您加载的项目是否超出了ajax请求中的项目

  /* code for infinite scroll */
  loadMoreItems = () => {
    // hasMore = data.items.length (you may want to rename this more appropriately)
    if (this.state.loadingState || (this.state.items > this.state.hasMore)) {
      // Do not load if there's no more items
      return;
    }
    ...