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