Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed [closed]
Tengo un problema a la hora mostrar el pdf se carga rapido y luego dice Se produjo un error al renderizar!
y el error en la consola es: No se puede usar el mismo lienzo durante múltiples operaciones de render (). Utilice un lienzo diferente o asegúrese de que las operaciones anteriores se hayan cancelado o completado.
Alguna solucion de este error?
import React, { useState } from 'react';
import Pagina from './Page/Pagina';
import PDFViewer from 'pdf-viewer-reactjs'
import { BlobProvider } from '@react-pdf/renderer';
import './Page/View.css';
import LoaderData from '../../../../../loaders/DataListLoader';
const View = () => {
const [base64Data, setBase64Data] = useState();
return (
<div >
<BlobProvider document={Pagina}>
{({ blob, url, loading, error }) => {
if (!loading) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
var base64data = reader.result;
setBase64Data(base64data.replace(/^data:.+;base64,/, ''));
}
}
if (base64Data) {
return (
<div className="h-full">
<PDFViewer
document={{
base64: base64Data
}}
protectContent
watermark={{
text: 'SmartLaw',
diagonal: true,
opacity: '0.5',
font: 'Comfortaa',
size: '150',
color: '#7E7A7A',
}}
navigation={{
css: {
navbarWrapper: 'customWrapper',
zoomOutBtn: 'customPrevBtn',
resetZoomBtn: 'customResetBtn',
zoomInBtn: 'customNextBtn',
previousPageBtn: 'customPrevBtn',
pageIndicator: 'customPages',
nextPageBtn: 'customNextBtn',
rotateLeftBtn: 'customPrevBtn',
resetRotationBtn: 'customResetBtn',
rotateRightBtn: 'customNextBtn',
},
}}
/>
</div>
);
}
else {
return <LoaderData />
}
}}
</BlobProvider>
</div>
)
};
export default View;