0

我已经从数据库中渲染了数据并显示在我创建的页面中。（它正确显示了所有数据一次）然后我在该类下添加了生成为 pdf 会话，它成功地将数据作为 pdf 提供。但是在页面中，数据显示了两次。我希望数据只显示一次。任何人都可以找出我的编码中的错误吗？

我的页面代码需要另存为pdf

这是一个 .jsx 页面

员工PDF.jsx

import React, { useRef } from 'react';
import axios from 'axios';
import { useReactToPrint } from 'react-to-print';
import { render } from '@testing-library/react';



export default class EmployeePDF extends React.Component {
constructor(props) {
    super(props);
    this.state = { 
        data:[]
     }
}

componentDidMount(){
    this.fetchEmpDetails();
} 

fetchEmpDetails = () =>{
    var url = "http://127.0.0.1:8000/EmployeeDetail-list/";
    axios.get(url).then(res => {
        const data = res.data;
        this.setState({data});
    })       
};

render() { 
    return ( 
            <div className="row">                
                <div className="col main1" style={{height:"100%"}}>
                    <br></br>
                    <h1 style={{color: "DodgerBlue", fontSize: '30px',fontWeight:"bold"}}><center>EMPLOYEE DETAILS</center></h1>
                    <div>
                        <div className="table-responsive">
                        <table className="table" style={{fontSize:"10px"}}>
                            <thead className="theadss">
                            <tr>
                                <th>Employee ID</th>
                                <th>Employee Name</th>                                  
                                <th>Primary Phone</th>
                                <th>Secondary Phone</th>
                                <th>Position</th>
                                <th>Address</th>
                                <th>Email</th>
                                <th>Trained Years</th>
                                <th>Joined Date</th>    
                            </tr>
                            </thead>
                            <tbody >
                            {this.state.data.map(user =>{
                                return(
                                <tr>
                                <td>{user.emp_det_id}</td>
                                <td>{user.employee_name}</td>
                                <td>{user.primary_phone}</td>
                                <td>{user.secondary_phone}</td>
                                <td>{user.position}</td>
                                <td>{user.address}</td>
                                <td>{user.email}</td>
                                <td>{user.trained_years}</td>
                                <td>{user.joined_date}</td>
                                </tr>
                                );
                            })}
                            </tbody>
                        </table>
                        </div>
                    </div>
                </div>   
            </div>
     );
}}

//Printing or saving as PDF
const Example = () => {
const componentRef = useRef();
const handlePrint = useReactToPrint({
  content: () => componentRef.current,
});

return (
  <div>
    <EmployeePDF ref={componentRef} />
    <button onClick={handlePrint}>Print or Save as PDF</button>
    <br></br>
  </div>  
);};render(<Example/>,document.querySelector("#root"));

这是我得到的输出我 图片 希望通过“打印或另存为 pdf”按钮显示一次员工详细信息

当我选择打印或另存为 pdf 按钮时，它会保存一次数据 在此处输入图像描述

（我使用了 react-to-print 库）

4

1 回答 1

1

你可以使用 ReactDom 的渲染吗

import ReactDOM from "react-dom";
ReactDOM.render(<Example/>,document.querySelector("#root"));
于 2020-10-16T06:55:46.187 回答