react 获取ajax列表,react中使用ajax获取数据并渲染

如下代码

import React from 'react';

import {Button, Card, Row, Badge, Modal, Table} from 'antd';

import Services from 'Services/monitor';

import classnames from 'classnames';

import {isSuccess} from 'Utils/request';

import {SERVICE_STATUS, SERVICE_STATUS_COLOR} from 'Constants/constants';

import {encodeFormatTime} from 'Utils/time';

import RateLine from './RateLine';

import NumberLine from './NumberLine';

import styles from './index.less';

export default class MainPage extends React.PureComponent {

state = {

agentStatus: SERVICE_STATUS.OFFLINE,

visible: false,

logList: [],

pagination: {},

loading: false,

loadSet: false

}

componentDidMount() {

Services.getAgentStatus().then(res => {

if (isSuccess(res)) {

this.setState({agentStatus: res.model.status});

}

});

}

// 日志

getLogTableColumn = () => {

const columns = [{

dataIndex: 'timestamp',

title: '时间',

render: encodeFormatTime,

width: '200px'

}, {

dataIndex: 'type',

title: '操作类型',

width: '150px'

}, {

dataIndex: 'message',

title: '操作内容',

width: '300px'

}];

return columns;

}

condition = {

pageNo: 1,

pageSize: 5

};

handlePiganation = ({current}) => {

this.condition.pageNo = current;

this.loadLog();

}

loadLog = () => {

this.setState({loading: true});

Services.getLog(this.condition).then(res => {

if (isSuccess(res)) {

const {model, pageInfo: {count: total, pageNo, pageSize}} = res;

if (pageNo === this.condition.pageNo) {

const pagination = {

total,

pageSize,

current: pageNo

};

this.setState({logList: model, pagination});

}

}

}).finally(() => {

this.setState({loading: false});

});

}

showModal = () => {

this.loadLog();

this.setState({visible: true});

}

showSetp = () => {

this.setState({loadSet: true});

}

closeModal = () => {

this.setState({visible: false, loadSet: false});

this.condition.pageNo = 1;

}

renderLogTable = () => {

const {pagination, logList, loading, visible} = this.state;

if (!visible) {

return null;

}

return (

columns={this.getLogTableColumn()}

dataSource={logList}

loading={loading}

pagination={pagination}

onChange={this.handlePiganation}

/>

);

}

render() {

const lines = [{

title: 'CPU使用率',

getData: Services.getCpuMonitorData

},

{

title: '内存使用率',

getData: Services.getMemoryMonitorData

},

{

title: '磁盘占用率',

getData: Services.getDiskMonitorData

},

{

title: '当前运行任务数',

getData: Services.getTaskMonitorData,

type: 'number'

}];

const agentStatus = this.state.agentStatus;

let color = '';

if (agentStatus === SERVICE_STATUS.OFFLINE) {

color = SERVICE_STATUS_COLOR.OFFLINE;

} else {

color = SERVICE_STATUS_COLOR.ONLINE;

}

return (

监控配置

运行日志

节点状态：

{

lines.map(item => {

const {title, getData, type} = item;

const Line = type ? NumberLine : RateLine;

return (

);

})

}

visible={this.state.visible}

onCancel={this.closeModal}

footer={null}

width="750px"

>

{this.renderLogTable()}

visible={this.state.loadSet}

onCancel={this.closeModal}

footer={null}

width="750px"

>

{this.renderLogTable()}

);

}

}

我需要在监控配置这个弹框通过后台的接口获取内容并且渲染出来，

就是这个样式:

怎么实现这个渲染哇