反応性ページネーションによるページ分割

Question

反応性ページングを持つアイテムのリストのページングを作成する必要があります。私のコンポーネントは以下の通りです：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Link, browserHistory } from 'react-router'; 
import ReactPaginate from 'react-paginate'; 

class AlbumsShow extends Component { 

    getInitialState() { 
    return { 
     items: [] 
    } 
    } 
    onChangePage(page, album) { 
    return request("album/" + album.id, {page: page}).then(function(items) { 
     this.setState({items: items}); 
    }.bind(this)); 
    } 

    renderImage(){ 

     return this.props.images.map((image) => { 
      return(

       <li key={image.id}>     
         <img alt="job" src={image.img} /> 
       </li> 

      ); 
     }); 
    } 


    render(){ 

     return (

      <div> 
       <div className="albums"> 
        <div className="albums_caixa"> 
         <div className="row"> 
          <div className="col-md-12"> 
           <ul className="no_pad"> 
            {this.renderImage()} 
            <Paginator max={5} onChange={this.onChangePage}/> 
           </ul> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

     ); 
    } 
} 


function mapStateToProps(state){ 

    return { 

     images: state.image 

    }; 
} 



export default connect(mapStateToProps)(AlbumsShow); 

コンソールエラーが「要求」が に定義されていない私を示して、私は私の項目に次のルーティングパスが必要になります/アルバム/：ID /ページ/：ページ。

ありがとうございました！

Answer 1

コンソールに表示されるように、onChangePageのrequestメソッドは定義されていません。通常、onChangePage関数では、そのページに関連するデータを取得する必要があります。 fetchのような他の方法を使うことができます。