Блог

Главная - Вопросы по программированию - Избегайте компонента рендеринга каждого вызова API

Избегайте компонента рендеринга каждого вызова API

#javascript #reactjs

Вопрос:

Ну, например, там я создаю карту из 2 таблиц, потому что я вызываю 2 идентификатора, я получаю 2 таблицы в DOM, и когда я нажимаю кнопку, она загружает PDF-файл с этими 2 таблицами, по 1 на каждой странице.

Но что произойдет, если я запрошу 20 идентификаторов? Это было бы 20 таблиц, это было бы 20 страниц в формате pdf (без проблем), но в DOM также было бы 20 компонентов.

Что я ищу, так это то, что в pdf-файле 2 таблицы по 1 отображаются, например, на каждой странице, но не в DOM, потому что, если бы было 100 таблиц, тогда в DOM было бы 100 компонентов.

Или, если также может быть, что в DOM появляется только 1 компонент таблицы (например, ejm), но все запрошенные отображаются в pdf.

Основной компонент:

 import React, { useRef } from 'react';
import { Button } from 'reactstrap';
import RenderPdf from './RenderPdf';


const BlankPage = () => {

  return (
    <>
        <RenderPdf />
        
      <Button>Download</Button>
{/* for now it does nothing - Button */}
      
    </>
  );
};

export default BlankPage;

Компонент, который сопоставляет каждый вызов API с таблицей:

 import { Table } 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 Registers = () => {
  const [InfoData, setInfoData] = useState([]);
  const pdfExportComponent = useRef(null);

  useEffect(() => {
    const apiURL = `${process.env.REACT_APP_URL_PDF}?conditional=idMerchant$in28::4193`; // 2 tables
    axios
      .get(`${apiURL}`, options)

      .then(({ data }) => {
        setInfoData(data.data);
      })
      .catch((error) => {
        console.log('Alerta error: ', error.data);
      });
  }, []);

  return (
    <>
    {InfoData.map((res) => (
        <div id='test' className="card text-left " key={res.idMerchant} ref={pdfExportComponent}>
          <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>
              //..
            </tbody>
          </Table>
        </div>
      ))}
      
    </>
  );
};

export default Registers;

Компонент, который преобразует таблицы в документ .pdf, 1 таблица на страницу (1 компонент на страницу):

 import React, { useRef } from 'react';
import { PDFExport } from '@progress/kendo-react-pdf';
import Registers from './Registers';

const RenderPdf = () => {
  const pdfExportComponent = useRef(null);
  return (
    <>
      <PDFExport
        ref={pdfExportComponent}
        fileName="Archivo.pdf"
        scale={0.9}
        paperSize="a4"
        keepTogether="Table"
      >
        <Registers />
      </PDFExport>

      <Button
      className="k-button"
      onClick={() => {
        if (pdfExportComponent.current) {
          pdfExportComponent.current.save();
        }
      }}
    >
      Export PDF
    </Button>

    </>
  );
};

export default RenderPdf;

Эта кнопка ссылается на pdfExportComponent, она оценивает, находится ли PDFexport на странице, если да, то pdfExportComponent.current.save (); загрузите его

Комментарии:

1. Попробуйте использовать React.memo или React.useMemo

Ответ №1:

Метки: