用加载器显示无限滚动

Question

我正在通过创建电影列表应用来学习反应。我使用reactjs，react-mdl创建了一个电影列表。我无法使用无限滚动功能。例如，首先，列表上显示3部电影，当用户向下滚动时，应显示更多3部电影列表，但在列表中再显示3部电影之前，应显示加载器图标。我怎样才能在这种代码场景中展示出来？我知道我必须定义状态isLoading和isLoadingMore。如果isLoading的状态为false，则应隐藏加载器，否则应显示加载器。

App.js

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      movie:[
          {
            title:'The Flash',
            id:1,
            imageUrl:'http://cdn3-www.superherohype.com/assets/uploads/gallery/the-flash-2x15/12771634_1000420230050280_1499915054664837033_o.jpg',
            rottenTomatoes:'85%'
          },

          {
            title:'Silicon Valley',
            id:2,
            imageUrl:'https://www.wired.com/wp-content/uploads/2016/03/silicon_valley_opener4.jpg',
            rottenTomatoes:'90%'
          },

          {
            title:'Scorpion',
            id:3,
            imageUrl:'http://cdn-uploads.gameblog.fr/images/blogs/36115/202746.jpg',
            rottenTomatoes:'80%'
          },

      ],
      isLoading:true,
      isLoadingMore:false
    }
  }

  showLoaderIcon(){
    this.setState({
      isLoading:true
    });
  }

  hideLoaderIcon(){
    this.setState({
      isLoading:false
    });
  }

  render() {
    return (
      <div className="App">
        <div className="demo-big-content">
            <Layout fixedHeader>
                <Header>
                    <HeaderRow title="Find TV Shows">
                    </HeaderRow>
                    <HeaderRow>
                      <div className="search">
                        <span className="material-icons search-icon">search</span>
                        <input type="text" className="form-control" placeholder="Name of show(e.g Friends)" />
                      </div>
                    </HeaderRow>
                </Header>
                <Drawer title="Title">
                </Drawer>
                <Content>
                    <div className="page-content" />
                    <MovieList movies={this.state.movie} />
                </Content>
            </Layout>
          </div>
      </div>
    );
  }
}

export default App; 

MovieListItem.js

const MovieListItem = ({movie}) => {
  const imageUrl = movie.imageUrl;
  const mainCast = _.map(movie.mainCast, (cast) => {
    return(
        <li className="list-item">
          {cast}
        </li>
    )
  })
    return (<li className="list-group-item">
              <div className="video-list media">
                <div className="media-left">
                  <img className="media-object" src={imageUrl} alt={movie.title} />
                </div>
                <div className="media-body">
                  <div className="media-heading">
                    <h4 className="title">{movie.title}</h4>
                  </div>
                  <div className="main-cast">
                    <ul id="cast-list">
                    {mainCast}
                    </ul>
                  </div>
                  <div className="reviewer">
                      <div className="col-sm-3 col-xs-3">
                        <img src={imdb} className="reviewer-img img-responsive" alt="imdb" />
                      </div>
                      <div className="col-sm-3 col-xs-3">
                        <p className="reviewer-score">{movie.imdb}</p>
                      </div>
                      <div className="col-sm-3 col-xs-3">
                        <img src={rottenTomatoes} className="reviewer-img img-responsive" alt="rottenTomatoes"/>
                      </div>
                      <div className="col-sm-3 col-xs-3">
                        <p className="reviewer-score">{movie.rottenTomatoes}</p>
                      </div>
                  </div>
                </div>
              </div>
          </li>
        )
};

export default MovieListItem;