前端之家

  1. 首页
  2. 问答

通过react-csv使antd表导出到csv使表变慢

• 问答

我正在使用antd table，并且我想将数据导出到csv，所以我使用了react-csv并成功了。但是在添加react-csv之后，我的antd表太慢，无法选择该行，滚动。如果删除react-csv，则表速度足够快。

这是我的用法：

import React from 'react';
import {Modal,Button} from 'react-bootstrap';
import {Table} from 'antd';
import * as ts_api from '../../api/ts/ts_api';
import 'antd/dist/antd.css';
import moment from 'moment';
import { CSVLink } from "react-csv";
const { Column,ColumnGroup } = Table;

export default class Monthly_Viewer extends React.Component{
    constructor(props){
        super(props);
        this.state={
            showmodel : true,timesheetlist : [],}
        this.handleModelShow = this.handleModelShow.bind(this);
    }

    componentDidmount(){

        ts_api.getallby_datefromto_empfromto_cscfromto(fromdate,todate,fromemp,toemp,fromcsc,tocsc).then((res)=>{  

          console.log("here");
            this.setState({              
                timesheetlist : res,exporttimesheetlist : res
               });   
          })
    }

    handleModelShow = event => {      
       if(event && event.target.id === "close"){
        this.setState({
            showmodel : !this.state.showmodel
        })
       }        
    }    

    render(){    
        return(
            <div>
                <Modal show={this.state.showmodel}
                       onHide={this.handleModelShow}
                       dialogClassname="mtd-viewdialog"
                       >
                    <Modal.Header closeButton>

                    </Modal.Header>
                    <Modal.Body >

                    <Table  dataSource={this.state.timesheetlist} 
                            rowKey="id" 
                            size="small" 
                            bordered
                            scroll={{ x: 'max-content',y:450}}
                            pagination = {{pageSizeOptions : ['10','30','60','100'],showSizeChanger:true}}
                            >
                      <Column title="Employee ID" dataIndex="empid" key="empid" width={120} defaultsortOrder="descend" sorter={(a,b)=> a.empid - b.empid} fixed="left"/>
                      <Column title="Employee Name" dataIndex="empname" key="empname" width={250} defaultsortOrder="descend" sorter={(a,b)=> a.empname?a.empname.localeCompare(b.empname):1} fixed="left"/>
                      <Column title="Date" dataIndex="tdate" key="tdate" width={100}
                      render={date=>(
                        moment(date).format("DD/MM/YYYY")
                      )}
                      sorter={(a,b)=>a.tdate.localeCompare(b.tdate)}
                      fixed="left"
                      />

                    </Table>

                    </Modal.Body>
                    <Modal.Footer>
                    <Button variant="secondary" onClick={this.handleModelShow} id="close" >
                        Close
                      </Button>
                      <CSVLink filename={"Time Detail Report.csv"} data={this.state.timesheetlist} classname="btn btn-primary">Download me</CSVLink>

                    </Modal.Footer>
                </Modal>
            </div>
        )
    }
}

我收到警告：

  

警告：componentWillReceiveProps已被重命名，并且没有   推荐使用..........

     

请更新以下组件：CSVLink

我的渲染器有问题吗？为什么react-csv使表变慢？

tickerly 回答：通过react-csv使antd表导出到csv使表变慢

实际上，这是一个尚未修复的issue。如果您要渲染大型列表，建议使用其他库或其他内容。

我已经设置了code sandbox。就我而言，如果我选择antd table，1000 / page会变慢，否则就可以了。这取决于机器。

class App extends Component {
  state = {
    showmodel: true,columns: [],timesheetlist: []
  };

  componentDidMount = () => {
    let data = [];

    for (var i = 0; i < 10000; i++) {
      data.push({
        empid: `${i}`,empname: `empname ${i}`,tdate: `05/09/${i > 2019 ? "2019" : i}`
      });
    }

    const columns = [
      {
        title: "Employee ID",dataIndex: "empid",key: "empid",width: 120,defaultSortOrder: "descend",sorter: (a,b) => a.empid - b.empid,fixed: "left"
      },{
        title: "Employee Name",dataIndex: "empname",key: "empname",width: 250,b) => (a.empname ? a.empname.localeCompare(b.empname) : 1),{
        title: "Date",dataIndex: "tdate",key: "tdate",width: 100,render: date => moment(date).format("DD/MM/YYYY"),b) => a.tdate.localeCompare(b.tdate),fixed: "left"
      }
    ];

    this.setState({
      timesheetlist: data,columns
    });
  };

  handleModelShow = () => {
    this.setState({ showmodel: !this.state.showmodel });
  };

  render() {
    return (
      <>
        <Modal
          show={this.state.showmodel}
          onHide={this.handleModelShow}
          dialogClassName="mtd-viewdialog"
        >
          <Modal.Header closeButton />
          <Modal.Body>
            <Table
              columns={this.state.columns}
              dataSource={this.state.timesheetlist}
              rowKey="id"
              size="small"
              bordered
              scroll={{ x: "max-content",y: 450 }}
              pagination={{
                pageSizeOptions: ["10","30","60","100","1000"],showSizeChanger: true
              }}
            />
          </Modal.Body>
          <Modal.Footer>
            <Button
              variant="secondary"
              onClick={this.handleModelShow}
              id="close"
            >
              Close
            </Button>

            <CSVLink
              filename={"Time Detail Report.csv"}
              data={this.state.timesheetlist}
              className="btn btn-primary"
            >
              Download me
            </CSVLink>
          </Modal.Footer>
        </Modal>
        <Button variant="danger m-5" onClick={this.handleModelShow}>
          Open Modal
        </Button>
      </>
    );
  }
}
,

尝试使用CSVLink制作单个组件：

const DowndloadTable = ({ data }) => (
    <CSVLink
        className="btn btn-primary"
        filename={"Time Detail Report.csv"}
        data={data}
    >
        Download me
    </CSVLink>
);

// and then in your Monthly_Viewer component:
render() {
    return (
        ...another stuff
        <DowndloadTable data={this.state.timesheetlist} />

您遇到了问题，因为整个Monthly_Viewer组件都会重新渲染，但在上述情况下，它只会是DowndloadTable

antdexport-to-csvreactjs
本文链接：https://www.f2er.com/3169145.html

大家都在问