NotFoundError: узел не был найден при удалении компонента реакции

Question

Я хочу отобразить компонент в соответствии с переменной состояния в поставщике контекста. Когда я загружаю эту страницу, отображается закрытие (изначально fullRender имеет значение false). Нажав кнопку, чтобы отобразить его, я вижу холст в dom. Когда я нажимаю кнопку «Удалить», я вызываю removeFullRender в контексте, который снова устанавливает для него значение false.

const launchRender = () => {
    setFullRender(true);
}

const removeFullRender = () => {
    setFullRender(false);
}

Как только я это сделаю, реагирую сбои (= показывает белую страницу и выдает ошибку в response-dom. development. js) с NotFoundError: Node was not found вместо того, чтобы снова показывать закрытый div.

Компонент полной визуализации:

const FullRender = (props) => {
    const context = useContext(FabricContext);
    const [canvas, setCanvas] = useState();

    useEffect(() => {
        if(!context.fullRender){
            return
        }
        setCanvas(new fabric.Canvas("full-canvas", {
            selection: false,
        }));
        console.log(context.fullRender);
    }, [context.fullRender]);

    return (
        <>
        {context.fullRender ?
            <>
            <canvas
                style={props.style}
                id="full-canvas"
            >
            </canvas>
            <Button onClick={context.removeFullRender}>X</Button>
            </>
            : <div>closed</div>
        }
        </>
    );
}

Answer 1

У меня это работает в этом примере:

https://codesandbox.io/s/dank-frog-9wcgc?file= / src / App. js

Использование фрагментов реакции вокруг холста вызвало ошибка (не знаю почему)

Переход на другой тег должен устранить ее:

<div>
   <canvas
      style={props.style}
      id="full-canvas"
   >
   </canvas>
   <Button onClick={context.removeFullRender}>X</Button>
</div>