时间戳

首页 > 解决方案 > NotFoundError：删除反应组件时找不到节点

javascript - NotFoundError：删除反应组件时找不到节点

问题描述

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

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

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

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

标签： javascriptreactjs

解决方案

我让它在这个例子中工作：

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>

推荐阅读