通过在线API实现无限滚动功能

Question

我正在使用YTS API，我想制作无限滚动功能。 有一个页面参数和限制参数。似乎它可以与他们一起使用，但我不知道如何使用它。我是 React 的初学者。你能帮我吗？

fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count&limit=20')
fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count&page=2')

这是YTS API的链接https://yts.am/api#list_movies

Answer 1

我会尝试使用 React-Waypoint 并在每次进入屏幕时调度一个操作来获取数据。
IMO 最好的方法是使用 redux，但这里有一个没有的例子：

state = { currentPage: 0, data: [] };

getNextPage = () => {
  fetch(`https://yts.am/api/v2/list_movies.json?sort_by=download_count&page=${this.state.currentPage}`).
    then((res) => this.setState((prevState) => ({currentPage: prevState.currentPage + 1, data: res.body}));
}

render(){
  <div>
    {
      this.state.data.map((currentData) => <div>{currentData}</div>)
    }
    <Waypoint onEnter={this.getNextPage}/>
  </div>
}

Answer 2

我想无限地显示 {this._renderList() }

import React, {Component} from 'react';
import L_MovieList from './L_MovieList';
import L_Ranking from './L_Ranking';
import './L_Right_List.css';
import Waypoint from 'react-waypoint';
class L_BoxOffice extends Component {
  state = {
    currentPage: 0,
    data : []

  };
  constructor(props) {
    super(props);
    this.state = {
      movies: []
    }
    this._renderRankings = this._renderRankings.bind(this);
    this._renderList = this._renderList.bind(this);
  }
  componentWillMount() {
    this._getMovies();
  }
  _renderRankings = () => {
    const movies = this.state.movies.map((movie, i) => {
      console.log(movie)
      return <L_Ranking title={movie.title_english} key={movie.id} genres={movie.genres} index={i}/>
    })
    return movies
  }
  _renderList = () => {
    fetch(`https://yts.am/api/v2/list_movies.json?sort_by=download_count&page=${this.state.currentPage}`)
      .then((res) => this.setState((prevState) => ({currentPage: prevState.currentPage + 1, data: res.body}));
    const movies = this.state.movies.map((movie) => {
      console.log(movie)
      return <L_MovieList title={movie.title_english} poster={movie.medium_cover_image} key={movie.id} genres={movie.genres} language={movie.language} runtime={movie.runtime} year={movie.year} rating={movie.rating} likes={movie.likes} trcode={movie.yt_trailer_code}/>
    })
    return movies
  }
  _getMovies = async () => {
    const movies = await this._callApi() 
    this.setState({ 
      movies 
    })
  }
  _callApi = () => {
    return fetch('https://yts.am/api/v2/list_movies.json?sort_by=download_count&limit=10').then(potato => potato.json()) 
      .then(json => json.data.movies)
      .catch(err => console.log(err))
  }
  getNextPage = () => {
  fetch(`https://yts.am/api/v2/list_movies.json?sort_by=download_count&page=${this.state.currentPage}`).
    then((res) => this.setState((prevState) => ({currentPage: prevState.currentPage + 1, data: res.body}));
}

  render() {
    const {movies} = this.state;
    let sub_title;
    let right_information;
    if (this.props.page == 'main') {
      sub_title = <div>Today Box Office</div>;
      right_information = <div>
        aaa</div>;
    } else if (this.props.page == 'box_office') {
      right_information = <div className={movies
          ? "L_Right_List"
          : "L_Right_List--loading"}>
        {this._renderList()}
        {
          this.state.data.map((currentData) => <div>{this._renderList()}</div>)
        }
        <Waypoint onEnter={this.getNextPage}/>
      </div>;
    }
    return (<div style={{
        backgroundColor: '#E5E5E5',
        paddingTop: '20px',
        paddingLeft: '20px'
      }}>
      {sub_title}
      <div className={movies
          ? "L_Left_Ranking"
          : "L_Left_Ranking--loading"}>
        <div className="L_Left_Ranking_title">영화랭킹</div>
        {this._renderRankings()}
      </div>
      {right_information}

    </div>);
  }
}

export default L_BoxOffice;