react 实现分页

一、在state里面定义 数据集 ，每页显示的第一个和最后一个

this.state = {
           	//数据集
			datasetList: [],
			minValue:0,
            maxValue:44,
        };

二、跳转页面后你的第一个数据的id和最后一个数据的id ，这里每页显示10条数据

handleValue = value =>{
//value分页id
    console.log(value)
//分页小于等于1就是第一页没变
    if(value<=1){
        this.setState({
            minValue:0,
            maxValue:10,
        });
    }else {
        this.setState({
            minValue:(value-1)*10,
            maxValue:(value-1)*10+10
        });
    }
};

三、展示，下面是我展示图片是的代码片段（用map遍历，数据集使用slice（第一个id，最后一个id）来获取数据的）

 <Row >
                {this.state.datasetList.slice(this.state.minValue,this.state.maxValue).map(item =>(
                     <Card.Grid
                        style={gridStyle}
                    >
                        <Image 
                            style={{width:"100px",minHeight:"100px",maxHeight:"100px"}}
                            alt="example"
                            src={item.fileUrl}
                        />
                        <p style={{width:"100px",minHeight:"20px",maxHeight:"20px"}}>
                            <Typography.Paragraph
								ellipsis={{ tooltip: item.fileName }}
								style={{ marginBottom: '1px' }}>
								{item.fileName}
							</Typography.Paragraph>
                        </p> 
 
                    </Card.Grid>
                   
                ))}
  </Row><br/>

四、分页

 <Pagination 
//当前页数
        defaultCurrent={1} 
//每页条数
        defaultPageSize={10} 
//数据总数
        total={this.state.datasetList.length} 
        onChange={this.handleValue} >
</Pagination>

这样就可以实现分页功能了。