ARTICLE AD BOX
I have a signature canvas on a form. When the form loads an existing report, it may already have signature data to load. In that case, in a useEffect, I call fromData on the signature component to load the signature data.
In Strict mode, React invoked this twice. The first time, it works, but the second time, the signature is cleared. Here is a minimum example: https://codesandbox.io/p/sandbox/brave-yalow-rglx3p
In src/index.js, I have:
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 my application, I don't call fromData twice, but react does. I couldn't reproduce that Strict Mode behavior in this code sandbox.)
Removing one of the calls to fromData makes the stroke visible in the signature box, but with both of them, the second call clears the signature box. I've also tried adding a sigCanvas.current.clear() between or calling with sigCanvas.current.fromData(data, {clear: true/false}); and it doesn't help.
What should I do?
