Fabri cjs создает несколько вложенных полотен в компоненте реагирования при добавлении нового текста

Question

Я пытался создать реагирующий функциональный компонент, чтобы иметь возможность добавить несколько текстов внутри холста. Даже если холст отображает тексты, вы не можете перемещать их, поскольку они представляют собой разные нежелательные вложенные холсты. Другими словами, каждый раз, когда вы нажимаете кнопку «Добавить», создается новый холст, который не нужен. Я понятия не имею, что вызывает это вложенные холсты. Любая помощь высоко ценится.

вот реализация

https://codesandbox.io/s/thirsty-mountain-kwyw1

основной компонент содержит список текстов в состоянии

import React, { useState } from "react";
import "./styles.css";
import MyCanvas from "./MyCanvas";

const App = () => {
  const fabric = window.fabric;
  const [controls, setControl] = useState([]);

  const add = () => {
    var text = new fabric.IText(
      "Sample Text " +
        new Date()
          .getTime()
          .toString()
          .substr(5),
      {
        fontFamily: "arial black",
        left: 100,
        top: 100,
        myid: new Date()
          .getTime()
          .toString()
          .substr(5),
        objecttype: "text"
      }
    );
    setControl([...controls, text]);
  };

  return (
    <div className="App">
      <button onClick={add}>Add</button>
      <MyCanvas controls={controls} />
    </div>
  );
};

export default App;

А это компонент canvas

import React, { useEffect } from "react";
import { fabric } from "fabric";

const MyCanvas = ({ controls }) => {
  const canvas = new fabric.Canvas("canvas-element");

  useEffect(() => {
    if (!controls) return;

    // const canvas = new fabric.Canvas(ref.current.id);

    controls.map(item => {
      canvas.add(item).setActiveObject(item);
    });
  });

  return <canvas id="canvas-element" width={600} height={400} />;
};

export default MyCanvas;

Answer 1

Я нашел проблему. Поскольку new fabric.Canvas("canvas-element") является конструктором, при каждом рендеринге он создает новый элемент и добавляет его в DOM. Чтобы предотвратить это нежелательное поведение, либо вы должны проверить, находится ли Canvas в дереве DOM, либо использовать альтернативные подходы, подобные описанному в этом посте: Как я могу использовать Fabri c. js с React?