用React分页显示数据(新)

这次重构了下代码，将原本多次调用接口的代码封装在一个函数里面来调用。用到了Promise

父组件：

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!)
}
function request(current: number, pageSize: number) {

    let myPromise = new Promise<[number, string[]]>(function (resolve, reject) {
        let xmlHttp: XMLHttpRequest;
        let totalPage: number;
        let listArray: Array<string>;
        const url = `http://10.10.4.191:8801/LiteProject/WebService/UserWebService.asmx/GetMyUndoTask?userID=5e056d07-0cb6-4753-b0e7-d961c05dece3&key=&PageIndex=${current-1}&PageSize=${pageSize}&SortOrder=&SortField=`;
        xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var obj = convert(xmlHttp.responseText);
                console.log(obj)
                totalPage = Math.ceil(obj.TotalCount / pageSize);
                //初始化数组              
                listArray = [];
                //设置循环次数以及循环起点,循环赋值数组  
                for (let i = 0; i <obj.Data.length; i++) {
                    listArray = [...listArray, obj.Data[i].TaskName]
                }
                const data: [number, string[]] = [totalPage, listArray];
                resolve(data);
            }
        }
        xmlHttp.open("GET", url, true);
        xmlHttp.send();

    })
    return myPromise;
}
//请求接口

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 = () => {
        const that=this;
        if (that.state.current-1 >= 1) {
            that.setState({
                current: --that.state.current
            })
            console.log(that.state.current)
            let promise = request(that.state.current, that.state.pageSize);
            promise.then(function (data) {
                that.setState({
                    listArray: data[1]
                })
            })
        } 

    }
    //下一页
    setNext = () => {
        const that = this;
        if (that.state.current+1 <= that.state.totalPage) {
            that.setState({
                current: ++that.state.current
            })
            console.log(that.state.current)
            let promise = request(that.state.current, that.state.pageSize);
            promise.then(function (data) {
                console.log(data);
                that.setState({
                    listArray: data[1]
                })
            })
        } 

    }
    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() {
        const that = this;
        let promise = request(that.state.current, that.state.pageSize);
        promise.then(function (data) {
            //console.log(555, data[1]);
            that.setState({
                totalPage: data[0],
                listArray: data[1]
            })
        })
    }

}
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;