用React分页显示数据

父组件中的请求接口重复写了三次，应该写成一个函数然后调用，目前还没有解决。

父组件:

import React from "react";
import { Dialog, Grid, IconButton, withStyles, Button, ListItem } from "@material-ui/core";
import CloseIcon from '@material-ui/icons/Close';
import MuiDialogContent from '@material-ui/core/DialogContent';
import Jiekou from "./Jiekou";
import PageButton from "./fenye";
function convert(rsp: string) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(rsp, "application/xml");
    return JSON.parse(doc.children[0].textContent!)
}
//请求接口

const DialogContent = withStyles(theme => ({
    root: {
        margin: 0,
        padding: theme.spacing.unit * 2,
        minHeight: 547,
        minWidth: 600
    },
}))(MuiDialogContent);
interface Props {
    open: boolean
    onClose: () => void
}
interface States{
    current: number, //当前页码
    pageSize:number, //每页显示的条数
    listArray:Array<string>,//列表数组
    totalPage:number,//总页数
    
}

class Table3 extends React.Component<Props,States> {
    state:States={
        current:1,
        pageSize:5,
        listArray:[],
        totalPage:0,
    }
  
  //表单设置长度
    styles = ({
        minWidth: 568
    });

      //上一页
      setUp=()=> {
        if (this.state.current > 1) {
            this.setState({
                current:--this.state.current 
            })        
            console.log(this.state.current);
        }
        var xmlHttp: XMLHttpRequest;
        const url = "http://10.10.4.189:8802/LiteProject/WebService/UserWebService.asmx/GetMyUndoTask?userID=5e056d07-0cb6-4753-b0e7-d961c05dece3&key=&PageIndex=0&PageSize=0&SortOrder=&SortField=";
        xmlHttp = new XMLHttpRequest();
        const that = this;
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var obj = convert(xmlHttp.responseText);
                that.setState({                     
                    totalPage:Math.ceil( obj.TotalCount/that.state.pageSize),
                    //初始化数组
                    listArray:[]
                })         
                console.log(obj);       
                //设置循环次数以及循环起点,循环赋值数组
                for (let i = (that.state.current-1)*that.state.pageSize; i < that.state.current*that.state.pageSize; i++) {                                  
                    that.setState({
                        listArray: [ ...that.state.listArray, obj.Data[i].TaskName]
                    })
                }
            }
        }
        xmlHttp.open("GET", url, true);
        xmlHttp.send();
    }
    //下一页
    setNext=()=> {
        if (this.state.current < this.state.totalPage) {
            this.setState({
                current: ++this.state.current              
            })
            console.log(this.state.current);
        }   
        
        var xmlHttp: XMLHttpRequest;
        const url = "http://10.10.4.189:8802/LiteProject/WebService/UserWebService.asmx/GetMyUndoTask?userID=5e056d07-0cb6-4753-b0e7-d961c05dece3&key=&PageIndex=0&PageSize=0&SortOrder=&SortField=";
        xmlHttp = new XMLHttpRequest();
        const that = this;
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var obj = convert(xmlHttp.responseText);
                that.setState({                     
                    totalPage:Math.ceil( obj.TotalCount/that.state.pageSize),
                    listArray:[]
                })         
                console.log(obj);       
                //设置循环次数以及循环起点,循环赋值数组
                for (let i = (that.state.current-1)*that.state.pageSize; i < that.state.current*that.state.pageSize; i++) {                                  
                    that.setState({
                        listArray: [ ...that.state.listArray, obj.Data[i].TaskName]
                    })
                }
            }
        }
        xmlHttp.open("GET", url, true);
        xmlHttp.send();
    }



    render() {
        return (
            <Dialog
                open={this.props.open}
            >
                <DialogContent>
                    <Grid >
                        {/* 上 */}
                        <Grid container
                            direction="row"
                            justify="space-between"
                            alignItems="baseline"
                        >
                            <Grid>
                                消息中心
                            </Grid>
                            <Grid>
                                <IconButton aria-label="Close" >
                                    <CloseIcon onClick={this.props.onClose} />
                                </IconButton>
                            </Grid>
                        </Grid>
                        {/* 中 */}
                        <Grid container>
                            <Grid item xs={12} >
                                <input style={this.styles} placeholder="键入任务名称/发起者名字/创建时间进行搜索" />
                            </Grid>
                        </Grid>
                        {/* 下 */}
                        <Grid item xs={12}>
                            <Jiekou listArray={this.state.listArray} />
                        </Grid>
                        {/* 分页按钮 */}
                        <Grid item xs={12}>
                           <PageButton  {...this.state} setUp={this.setUp} setNext={this.setNext}/>
                        </Grid>
                    </Grid>
                </DialogContent>
            </Dialog>
        )

    }
//组件真正被装载后执行请求接口
    componentDidMount(){
        var xmlHttp: XMLHttpRequest;
        const url = "http://10.10.4.189:8802/LiteProject/WebService/UserWebService.asmx/GetMyUndoTask?userID=5e056d07-0cb6-4753-b0e7-d961c05dece3&key=&PageIndex=0&PageSize=0&SortOrder=&SortField=";
        xmlHttp = new XMLHttpRequest();
        const that = this;
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var obj = convert(xmlHttp.responseText);
                that.setState({                     
                    totalPage:Math.ceil( obj.TotalCount/that.state.pageSize),
                    listArray:[]
                })         
                console.log(obj);       
                //设置循环次数以及循环起点,循环赋值数组
                for (let i = (that.state.current-1)*that.state.pageSize; i < that.state.current*that.state.pageSize; i++) {                                  
                    that.setState({
                        listArray: [ ...that.state.listArray, obj.Data[i].TaskName]
                    })
                }
            }
        }
        xmlHttp.open("GET", url, true);
        xmlHttp.send();
    }
    
}
export default Table3;

列表组件：

import React from "react";
import { ListItem, List, Button } from "@material-ui/core";
//xml转json

interface Props{
    listArray:Array<string>,//列表数组
}
class Jiekou extends React.Component<Props>{
   
    render() {
        return (
            //遍历输出
            <List>
               {this.props.listArray.map(x => (<ListItem>{x}</ListItem>))}            
            </List>
        )
    }

}
export default Jiekou;

分页按钮组件：

import React from "react";
import { Button } from "@material-ui/core";

interface Props {
    current: number, //当前页码
    pageSize: number, //每页显示的条数
    totalPage: number,//总页数
    setUp:()=>void,
    setNext:()=>void

}
class PageButton extends React.Component<Props> {

    render() {
        return (
            <div>
                <Button onClick={this.props.setUp} >上一页</Button>
                <span>{this.props.current}页/ {this.props.totalPage}页</span>
                <Button onClick={this.props.setNext}>下一页</Button>
            </div>
        );
    }
}
export default PageButton;