Paparan semula menggunakan tika React.StrictMode dan fabric.js's Canvas-Soal Jawab Rangkaian PHP Cina

Saya sedang mencipta kanvas dan butang fabrik, bentuk yang ditunjukkan oleh butang ini harus boleh dipilih. Saya tidak faham mengapa komponen saya dipaparkan semula dua kali dalam situasi berikut. Oleh itu, bentuk kain saya tidak boleh dipilih. Walau bagaimanapun, apabila saya mengalih keluar时，渲染只发生一次，我的形状是可选择的。我可以移除daripada fail index.tsx saya, saya tidak fikir ini adalah penyelesaian terbaik. Inilah demonya:

const { Fragment, StrictMode, useEffect, useRef } = React; const { createRoot } = ReactDOM; const styles = {}; const CanvasComponent = ({ id }) => { const canvasRef = useRef(null); useEffect(() => { console.log('init canvas'); // displayed twice with  canvasRef.current = initCanvas(); }, []); const initCanvas = () => ( canvasRef.current = new fabric.Canvas(`canvas-${id}`, { width: 800, height: 400, }) ); const addShape = (shapeType: string) => { let shape: fabric.Object; switch (shapeType) { case 'circle': shape = new fabric.Circle({ radius: 30, fill: 'red', left: 100, top: 100 }); break; case 'rectangle': shape = new fabric.Rect({ width: 60, height: 70, fill: 'green', left: 100, top: 100 }); break; default: return; } canvasRef.current.add(shape); }; return (      
 
 ); } function StrictModeEnabled() { return Strict Mode Enabled
; } function StrictModeDisabled() { return Strict Mode Disabled
; } const strictModeEnabledRoot = createRoot(document.getElementById("strict-mode-enabled")); strictModeEnabledRoot.render(); const strictModeDisabledRoot = createRoot(document.getElementById("strict-mode-disabled")); strictModeDisabledRoot.render();

Penyelesaian

Dalam kes anda, anda perlu membersihkan kanvas instan. Saya tidak biasa dengan Fabrik, tetapi daripada membaca dokumentasi, kaedahdisposenampaknya sesuai:

Adalah amalan yang baik yang anda perlukan untuk mengembalikan fungsi daripadauseEffect返回一个调用上述方法的函数。从链接的问题中可以看出，从useEffectyang melakukan pembersihan. Terdapat juga contoh yang berfungsi di bawah:

const { Fragment, StrictMode, useEffect, useRef } = React; const { createRoot } = ReactDOM; const styles = {}; const CanvasComponent = ({ id }) => { const canvasRef = useRef(null); useEffect(() => { console.log('init canvas'); // displayed twice with  canvasRef.current = initCanvas(); return () => canvasRef.current.dispose(); }, []); const initCanvas = () => ( canvasRef.current = new fabric.Canvas(`canvas-${id}`, { width: 800, height: 400, }) ); const addShape = (shapeType: string) => { let shape: fabric.Object; switch (shapeType) { case 'circle': shape = new fabric.Circle({ radius: 30, fill: 'red', left: 100, top: 100 }); break; case 'rectangle': shape = new fabric.Rect({ width: 60, height: 70, fill: 'green', left: 100, top: 100 }); break; default: return; } canvasRef.current.add(shape); }; return (      
 
 ); } function StrictModeEnabled() { return Strict Mode Enabled
; } const strictModeEnabledRoot = createRoot(document.getElementById("strict-mode-enabled")); strictModeEnabledRoot.render();