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

Question

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

P粉850680329 · Answer

＃＃＃質問＃＃＃

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

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

dispose

メソッド

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

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

リーリーリーリー