React waddo udaw....

[jennt]

meeka rerender wenne ay kiyala kiyanna puluwanda? document eka overlap wenawa infinite loop ekakata gihin.

ps: mama react danne nathooo.
plz help ekak dennoo
ada meeka danna oona. monawa karannada kiyala hithaganna baruwa inne..

import { useEffect, useRef, useState } from "react";
import "./App.css";
import WebViewer from "@pdftron/webviewer";
import * as PDFNet from "@pdftron/pdfnet-node";

function App() {
  const viewerDiv = useRef<HTMLDivElement>(null);

  useEffect(() => {
    WebViewer(
      {
        path: "lib",
        initialDoc: "blank-Pdf.pdf",
        fullAPI: true,
      },
      viewerDiv.current as HTMLDivElement,
    ).then((instance) => {
      // Move the enableFeatures call inside the then block
      instance.UI.enableFeatures([instance.UI.Feature.ContentEdit]);

      const { documentViewer, annotationManager } = instance.Core;

      documentViewer.addEventListener("documentLoaded", async () => {
        const doc = documentViewer.getDocument();
        const xfdfString = await annotationManager.exportAnnotations();
        const options = { xfdfString };
        const data = await doc.getFileData(options);
        const arr = new Uint8Array(data);
        const blob = new Blob([arr], { type: "application/pdf" });

        // Convert the Blob to a FormData object
        const formData = new FormData();
        // Change "pdf" to "file" to match the expected key on the server
        formData.append("file", blob, "filename.pdf");

        fetch("http://127.0.0.1:5000/upload", {
          method: "POST",
          body: formData,
        })
          .then((response) => response.blob())
          .then((blob) => {
            // Create a URL for the blob
            const url = URL.createObjectURL(blob);
            // Load the URL into the WebViewer
            instance.UI.loadDocument(url, {extension: 'pdf'});
          })
          .catch((error) => {
            console.error("Error sending PDF:", error);
          });
      });
    });
  }, []);

  return (
    <>
      <div className="w-full h-screen" ref={viewerDiv}></div>
    </>
  );
}

export default App;

 

[reddit]

chatGPT dapan code eka. fix karala dei

 

[Ranil_Wickramasinghe]

ඊය යකෝ තොට ඕකවත් හදාගන්න තේරෙන්නෙ නැද්ද

 

[jennt]

chatGPT dapan code eka. fix karala dei

mage laga premium eka naa. normal ekata daala baluwa hari giyee naa

ඊය යකෝ තොට ඕකවත් හදාගන්න තේරෙන්නෙ නැද්ද

dannawanam kiyannakoo

 

[poopoo]

useEffect(() => {
  // ... (WebViewer setup)

  const handleDocumentLoaded = async () => {
    // ... (Annotation handling, fetch, etc.)
    instance.Core.documentViewer.removeEventListener("documentLoaded", handleDocumentLoaded); // *** Remove the listener after execution***
  };

  documentViewer.addEventListener("documentLoaded", handleDocumentLoaded);

  // Keep cleanup in useEffect
  return () => {
    instance.Core.documentViewer.removeEventListener("documentLoaded", handleDocumentLoaded);
  };
}, []);

 

[හෙළයෙක්]

Empty array eka nisa Oka render wenawa eka digata.

Pahala ref eka useeffect eken maru karama component ekama change wenawa. Ethakota aye parak useeffect trigger wenawa

 

[jennt]

View attachment 225624

useEffect(() => {
  // ... (WebViewer setup)

  const handleDocumentLoaded = async () => {
    // ... (Annotation handling, fetch, etc.)
    instance.Core.documentViewer.removeEventListener("documentLoaded", handleDocumentLoaded); // *** Remove the listener after execution***
  };

  documentViewer.addEventListener("documentLoaded", handleDocumentLoaded);

  // Keep cleanup in useEffect
  return () => {
    instance.Core.documentViewer.removeEventListener("documentLoaded", handleDocumentLoaded);
  };
}, []);

mee gpt4 da?

Empty array eka nisa Oka render wenawa eka digata.

Pahala ref eka useeffect eken maru karama component ekama change wenawa. Ethakota aye parak useeffect trigger wenawa

try ekak deela balannam.

thanks help ekata..

 

[හෙළයෙක්]

mee gpt4 da?

try ekak deela balannam.

thanks help ekata..

Ekko use state ekak dala boolean ekak tiyana eka parak render unama block Karana Nathan useeffect nathi approach ekakata yanna

 

[poopoo]

mee gpt4 da?

Gemini Advanced (Paid Version)

Google trusted tester kenek nam free hambenawa oya model eka
https://aistudio.google.com/

 

[ThisaraMalintha]

bump

 

[jennt]

View attachment 225624

useEffect(() => {
  // ... (WebViewer setup)

  const handleDocumentLoaded = async () => {
    // ... (Annotation handling, fetch, etc.)
    instance.Core.documentViewer.removeEventListener("documentLoaded", handleDocumentLoaded); // *** Remove the listener after execution***
  };

  documentViewer.addEventListener("documentLoaded", handleDocumentLoaded);

  // Keep cleanup in useEffect
  return () => {
    instance.Core.documentViewer.removeEventListener("documentLoaded", handleDocumentLoaded);
  };
}, []);

adoo thanks aa. ube code eken awula harigiya.
thawa poddak thiyenawa hadaganna
try ekak dennam.

thanks bn.

 

[gamerlk]

Empty array eka nisa Oka render wenawa eka digata.

I don't think this is true.

The empty array [] means that the effect does not depend on any values from the component scope. Therefore, it should not be re-run on subsequent renders, only after the initial render.

 

[infoniroshan]

mage laga premium eka naa. normal ekata daala baluwa hari giyee naa

coding seen walata premium oni wela ne bn matanam. hariyata code eka deela issue eka kiwama goda daganna puluwan,
poddak wate yawaddi 2,3 parak error eka denna,. ethakota hariyanawa

 

[හෙළයෙක්]

I don't think this is true.

ඕකේ dom එක change wenwa

 

[gamerlk]

ඕකේ dom එක change wenwa

මං කිවෙ empty arry එක නිසා හැමපාරම render වෙනව කියන කතාව වැරදි කියල

 

[poopoo]

adoo thanks aa. ube code eken awula harigiya.
thawa poddak thiyenawa hadaganna
try ekak dennam.

thanks bn.

අඩෝ මන් දන්න ලබ්බක් නෑ බන්
ඇඩුණා මේ AI උට්ටගේ coding වලට
කුඹුරක් ලෑස්ති කරගන්න

 

[හෙළයෙක්]

මං කිවෙ empty arry එක නිසා හැමපාරම render වෙනව කියන කතාව වැරදි කියල

Ne eka thama oke case eka. Useref ekath Ekka Oka run wenawa. mulin 2 parak Oka run wenwa ita passe loop wenwa. Dev eke wene strict mode ain karama ok Eth solution eka nan useRef eka check karana eka. eka decenciey ekak widiyata dala null check karana eka.

https://stackoverflow.com/questions...twice-even-if-an-empty-array-is-used-as-an-ar

 

[හෙනයා]

Ne eka thama oke case eka. Useref ekath Ekka Oka run wenawa. mulin 2 parak Oka run wenwa ita passe loop wenwa. Dev eke wene strict mode ain karama ok Eth solution eka nan useRef eka check karana eka. eka decenciey ekak widiyata dala null check karana eka.

https://stackoverflow.com/questions...twice-even-if-an-empty-array-is-used-as-an-ar

2 parak run wenne strict mode tag eka athule app eka run unoth.. Naththam useEffect with empty array run wenne eka parai.. Methana wenne ara lib eken document eka aaye aaye load wenawa react context eken eliye..

Hariyata nikan kochchara deps dammath useEffect eka asse location.reload() ekak damma wage

 

[හෙළයෙක්]

2 parak run wenne strict mode tag eka athule app eka run unoth.. Naththam useEffect with empty array run wenne eka parai.. Methana wenne ara lib eken document eka aaye aaye load wenawa react context eken eliye..

Hariyata nikan kochchara deps dammath useEffect eka asse location.reload() ekak damma wage

Oka wisadana solution eka mokada

 

[හෙනයා]

Oka wisadana solution eka mokada

Man mobile eken inne try out karala balanna widhihak na udin pallen balala kiwwe.. Uda ekkenek solution eka dala thiyenawa neda