react如何将后端给的数据渲染至表格中（后端的接口字段我放在评论区了）

Question

import { Table } from "antd";
import React from "react";

export class Tables extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        align: 'center',
      },
      {
        title: '电话',
        dataIndex: 'tel',
        align: 'center',
      },
      {
        title: '地址',
        dataIndex: 'address',
        align: 'center',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        align: 'center',
        render: (text,r) => <a href={"www.baidu.com"+r.key} target="_blank">{text}</a>,
      },
    ];

    const data = [
      {
        key: '1',
        name: 'John Brown',
        tel: '10086',
        address: '成都',
        email: '[e-mail]',
      },
      {
        key: '2',
        name: 'Jim Green',
        tel: '1008611',
        address: '上海',
        email: '',
      },
      {
        key: '3',
        name: 'Joe Black',
        tel: '10001',
        address: '深圳',
        email: '',
      },
    ];
    return (
      <Table
        columns={columns}
        dataSource={data}
        bordered
      />
    )
  }
}

Answer 1

可以用reqwest模块加载接口数据后调用this.setState更新状态数据。或者直接用原生的fetch对象获取数据也行，题主这个问题和下面这个差不多。data改为异步获取就行

react怎么获取后端接口，并渲染。-前端-CSDN问答 CSDN问答为您找到react怎么获取后端接口，并渲染。相关问题答案，如果想了解更多关于react怎么获取后端接口，并渲染。 react.js、有问必答 技术问题等相关问答，请访问CSDN问答。 https://ask.csdn.net/questions/7515994

approvalDTO.applyTime/ approvalDTO.approvalId/ approvalDTO.applyInterfaceName新增到table中，columns对象得新增这3个字段。还有接口返回的格式是什么，最好贴出来看下，键名称是approvalDTO.applyTime/ approvalDTO.approvalId/ approvalDTO.applyInterfaceName 这样？