React.StrictModeとfabric.jsのCanvasインスタンスを使用した再レンダリング

Question

私は、選択可能にする必要がある形状をインスタンス化するファブリック キャンバスとボタンを作成しています。次の状況でコンポーネントが 2 回再レンダリングされる理由がわかりません。そのため、生地の形状をお選びいただくことができません。ただし、index.tsx ファイルから を削除すると、レンダリングは 1 回だけ行われ、形状が選択可能になります。 を削除することもできますが、それが最善の解決策とは思えません。デモは次のとおりです:

リーリー リーリー

Answer 1

＃＃＃質問＃＃＃

React で useEffect が 2 回実行される理由とその対処方法は何ですか?

この質問には、これが起こる理由と一般的な解決策を説明する適切な回答があります。 ＃＃＃解決＃＃＃ あなたの場合、インスタンス化されたキャンバスをクリーンアップする必要があります。 Fabric については詳しくありませんが、ドキュメントを読むと、

dispose

メソッド

が適切であるようです。 上記のメソッドを呼び出す useEffect から関数を返す必要があります。リンクされた質問からわかるように、useEffect

からクリーンアップを行う関数を返すことをお勧めします。以下に実際の例もあります:

リーリー リーリー