Reactjs 通过react csv将antd表格导出到csv使表格变慢

我使用的是

antd表

，我想将数据导出到

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>
        )
    }
}

从“React”导入React；
从“react bootstrap”导入{Modal，Button}；
从“antd”导入{Table}；
将*作为ts_api从“../../api/ts/ts_api”导入；
导入“antd/dist/antd.css”；
从“力矩”中导入力矩；
从“react csv”导入{CSVLink}；
const{Column，ColumnGroup}=表；
导出默认类每月\u查看器扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
模特儿：没错，
时间表列表：[]，
}
this.handleModelShow=this.handleModelShow.bind（this）；
}
componentDidMount（）{
ts_api.getallby_datefrom to_empfromto_cscfromto（fromdate，todate，frommp，toemp，fromcsc，tocsc）。然后（（res）=>{
console.log（“此处”）；
这个.setState（{
时间表列表：res，
导出时间表列表：res
});   
})
}
handleModelShow=事件=>{
if（event&&event.target.id==“close”）{
这是我的国家({
showmodel:！this.state.showmodel
})
}        
}    
render（）{
返回(
a、 empid-b.empid}fixed=“left”/>
a、 empname？a.empname.localeCompare（b.empname）：1}fixed=“left”/>
(
时间（日期）。格式（“日/月/年”）
)}
分类器={（a，b）=>a.tdate.localeCompare（b.tdate）}
fixed=“left”
/>
接近
下载我
)
}
}

我得到一个警告：

警告：componentWillReceiveProps已被重命名，并且未更新 推荐使用

请更新以下组件：CSVLink

---

我的渲染有什么错误吗？为什么

react csv

使表格变慢？

尝试使用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} />

constdowndloadTable=（{data}）=>(
下载我
);
//然后在月刊查看器组件中：
render（）{
返回(
…另一件事

这个问题是因为整个月刊查看器组件都会重新渲染，但在上面的情况下，它只会是DowndloadTable

实际上，这是一个尚未修复的问题。如果要渲染大列表，我建议使用其他库或其他东西

我已经设置了一个。在我的情况下，

antd table

如果我选择

1000/页

就会变慢，否则就可以了。这取决于机器

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,
        defaultSortOrder: "descend",
        sorter: (a, b) => (a.empname ? a.empname.localeCompare(b.empname) : 1),
        fixed: "left"
      },
      {
        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"
      }
    ];

    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>
      </>
    );
  }
}

类应用程序扩展组件{
状态={
模特儿：没错，
列：[]，
时间表清单：[]
};
componentDidMount=（）=>{
让数据=[]；
对于（变量i=0；i<10000；i++）{
数据推送({
empid:`${i}`，
empname:`empname${i}`，
tdate:`05/09/${i>2019？“2019”：i}`
});
}
常量列=[
{
标题：“员工ID”，
数据索引：“empid”，
密钥：“empid”，
宽度：120，
默认排序器：“下降”，
分拣机：（a，b）=>a.empid-b.empid，
修正：“左”
},
{
标题：“员工姓名”，
数据索引：“empname”，
密钥：“empname”，
宽度：250，
默认排序器：“下降”，
分拣机：（a，b）=>（a.empname？a.empname.localeCompare（b.empname）：1），
修正：“左”
},
{
标题：“日期”，
数据索引：“tdate”，
键：“tdate”，
宽度：100，
呈现：日期=>时刻（日期）.format（“DD/MM/YYYY”），
分拣机：（a，b）=>a.tdate.localeCompare（b.tdate），
修正：“左”
}
];
这是我的国家({
时间表列表：数据，
柱
});
};
handleModelShow=（）=>{
this.setState（{showmodel:！this.state.showmodel}）；
};
render（）{
返回(
接近
下载我
开放模态
);
}
}

请检查这是否有帮助，我尝试过，但速度仍然很慢，我注意到这是因为数据，因为当前记录超过20k。因此，我只需在用户单击“导出”按钮时分配数据。因此，现在第一次速度很快，但问题是我无法检测文件是否已下载。如果文件已下载，我只需要再次清除数据。