Legen Sie Daten zweimal in React-Signature-Canvas fest ⇐ JavaScript

[Anonymous]

Ich habe eine Signatur-Leinwand auf einem Formular. Wenn das Formular einen vorhandenen Bericht lädt, sind möglicherweise bereits Signaturdaten zum Laden vorhanden. In diesem Fall rufe ich in einem useEffect fromData für die Signaturkomponente auf, um die Signaturdaten zu laden.
Im strengen Modus hat React dies zweimal aufgerufen. Beim ersten Mal funktioniert es, aber beim zweiten Mal wird die Signatur gelöscht. Hier ist ein Minimalbeispiel:
https://codesandbox.io/p/sandbox/brave-yalow-rglx3p
In src/index.js habe ich:

Code: Select all

  const data = [[{ x: 90, y: 45.0625 }, {x:...... }]];
useEffect(() => {
if (!sigCanvas.current) {
return;
}
console.log("adding data");
sigCanvas.current.fromData(data);
sigCanvas.current.fromData(data);
});
...

(In meiner Anwendung rufe ich fromData nicht zweimal auf, React jedoch schon. Ich konnte dieses Verhalten im strengen Modus in dieser Code-Sandbox nicht reproduzieren.)
Durch das Entfernen eines der Aufrufe von fromData wird der Strich im Signaturfeld sichtbar, aber bei beiden löscht der zweite Aufruf das Signaturfeld. Ich habe auch versucht, ein sigCanvas.current.clear() zwischen sigCanvas.current.fromData(data, {clear: true/false}); hinzuzufügen oder damit aufzurufen, aber es hilft nicht.
Was soll ich tun?