这次重构了下代码,将原本多次调用接口的代码封装在一个函数里面来调用。用到了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;