NotFoundError：删除反应组件时找不到节点答案

【问题标题】：NotFoundError: Node was not found on removing react componentNotFoundError：删除反应组件时找不到节点
【发布时间】：2020-07-14 08:25:35
【问题描述】：

我想根据上下文提供者中的一个状态变量来显示一个组件。当我加载此页面时，显示已关闭（fullRender 最初为 false）。单击按钮显示它，我在 dom 中看到了画布。当我单击“删除”按钮时，我在上下文中调用 removeFullRender 再次将其设置为 false。

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

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

一旦我这样做，react 崩溃（= 显示白页并在 react-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>
        }
        </>
    );
}

【问题讨论】：

标签： javascript reactjs

【解决方案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>

【讨论】：

不幸的是，我不能使用代码和框，因为他们仍然没有解决火狐中火狐阻止内容的安全问题。但是，我根据您所说的重新创建了它，并且现在可以使用。似乎当片段嵌套时会导致此问题。这是一个反应错误还是不应该嵌套片段？
所以我认为这不是片段嵌套问题，因为它仅在更改内部片段时才有效。这可能与 React 如何跟踪织物实例画布有关。