Evitar renderizar componente de cada llamado a la API
Publicado por Jose (3 intervenciones) el 26/10/2021 19:17:46
Soy algo nuevo en React y me esta pasando algo que me imagino que es sencillo para alguien experimentado. Estoy llenando un tabla con una api y luego esa tabla la descargo en un archivo pdf y cada tabla en una pagina diferente.
Hago mas de un llamado a una api entonces la info que traigo la mapeo en un componente y luego lo renderizo, lo que me esta pasando es que me esta renderizando 1 componente por cada llamado o sea que que si hago 100 llamados a la api me renderiza 100 componentes y no quiero eso. ¿Qué quiero?, Que me renderice solo 1 componente en el DOM pero cuando le de a descargar ese archivo si venga con todas las tablas (Componentes) de todos los llamados que hice en el archivo PDF claro.
Hago mas de un llamado a una api entonces la info que traigo la mapeo en un componente y luego lo renderizo, lo que me esta pasando es que me esta renderizando 1 componente por cada llamado o sea que que si hago 100 llamados a la api me renderiza 100 componentes y no quiero eso. ¿Qué quiero?, Que me renderice solo 1 componente en el DOM pero cuando le de a descargar ese archivo si venga con todas las tablas (Componentes) de todos los llamados que hice en el archivo PDF claro.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';import { Table, Button } from 'reactstrap';
import { PDFExport } from '@progress/kendo-react-pdf';
const styles = {
title: {
textAlign: 'center',
fontSize: '20px',
fontWeight: 'bold',
},
subtitle: {
textAlign: 'center',
background: '#67B71F',
color: 'white',
fontSize: '15px',
},
td: {
fontSize: '15px',
},
th: {
fontSize: '15px',
fontWeight: 'bold',
},
button: {
fontWeight: 'bold',
},
};const options = {
headers: {
Authorization: process.env.REACT_APP_GETTOKENPDF,
},
};const BlankPage = () => {
const pdfExportComponent = useRef(null);
const [InfoData, setInfoData] = useState([]);
useEffect(() => {
const apiURL = `${process.env.REACT_APP_URL_PDF}?conditional=idMerchant$in28::4193`;
axios
.get(`${apiURL}`, options)
.then(({ data }) => {
setInfoData(data.data);
})
.catch((error) => {
console.log('Alerta error: ', error.data);
});
}, []);
const Registers = () => (
<>
{InfoData.map((res) => (
<div className="card text-left " key={res.idMerchant}>
<PDFExport forcePageBreak=".page-break">
<Table className="table table-bordered">
{/* <caption style={styles.title}>INFORMACION DE REGISTRO</caption> */}
<tbody>
<tr>
<td style={styles.th} colSpan="1">
Nombre de la Cuenta:</td>
<td style={styles.td}>{res.merchantName}</td>
<td style={styles.th}>ID:</td>
<td style={styles.td}>{res.idMerchant}</td>
</tr>
<tr>
<td style={styles.th}>Usuario que registro la cuenta:</td>
<td style={styles.td}>{res.officerUpdate}</td>
<td style={styles.th}>Fecha:</td>
<td style={styles.td}>{res.activationDate}</td>
</tr>
<tr>
<td style={styles.th}>Tipo de cuenta:</td>
<td style={styles.td}>{res.merchantType}</td>
</tr>
<tr>
<td style={styles.td} colSpan="4">
Los terminos y condiciones son aceptados por defecto al
momento del registro de la cuenta.<a href="https://www.paguelofacil.com/terminos-y-condiciones">
<br />
https://www.paguelofacil.com/terminos-y-condiciones
</a>
</td>
</tr>
</tr>
</tbody>
</Table>
</PDFExport>
</div>
))}
</>
); return (<>
<PDFExportforcePageBreak=".page-break"
fileName="Archivo.pdf"
scale={0.9}
paperSize="a4"
keepTogether="Table"
ref={pdfExportComponent}
><Registers />
</PDFExport>
<br />
<ButtonclassName="k-button"
onClick={() => {
if (pdfExportComponent.current) {
pdfExportComponent.current.save();
}}}
>Exportar en PDF
</Button>
</>
);};export default BlankPage;
Valora esta pregunta
0
