Получение ошибки «Невозможно прочитать свойства null» (чтение «clearRect») в Fabric в Next.js

Получение ошибки Cannot read properties of null (reading 'clearRect') в Fabric.js в Next.js. Я пытаюсь установить фоновое изображение в холсте Fabric.js. image все настроено правильно, но появляется указанная выше ошибка со следующим кодом.

import { fabric } from "fabric";
const { fabricObj, canvas, setCanvas, setObjectSelectForDelete } =
    useCanvasContext();
useEffect(() => {
    // 1st init fabric canvas object...
    const initCanvas = new fabric.Canvas(fabricObj?.current, {
        width: "500",
        height: "400",
    });

    fabric.Image.fromURL(
        "https://flowbite.com/docs/images/examples/[email protected]",
        function (img) {
            initCanvas.setBackgroundImage(
                img,
                initCanvas.renderAll.bind(initCanvas),
                {
                    scaleX: initCanvas.width / img.width,
                    scaleY: initCanvas.height / img.height,
                },
            );
        },
    );

    setCanvas(initCanvas);

    return () => initCanvas.dispose();
}, []);

Я попытался добавить код внутри блока try catch, но безуспешно.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
224
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете создать новый useEffect, чтобы убедиться, что initCanvas существует, а затем установить изображение. Что-то вроде:

  useEffect(() => {
    if (initCanvas) {
     fabric.Image.fromURL(
        "https://flowbite.com/docs/images/examples/[email protected]",
        function (img) {
            initCanvas.setBackgroundImage(
                img,
                initCanvas.renderAll.bind(initCanvas),
                {
                    scaleX: initCanvas.width / img.width,
                    scaleY: initCanvas.height / img.height,
                },
            );
        },
    );
    }
  }, []);

Другие вопросы по теме