Question

要初始化画布对象，它必须存在于DOM中，因此位于componentDidMount之后。但是我只想在挂载上只运行一次，而不再运行。

对于componentDidMount功能，我具有useEffect，其fabric canvas.js中的依赖列表为空

useEffect(() => {
    context.initCanvas('c');
}, []); //shall run only once on mount

这也会创建画布

return (
    <>
        <canvas id="c" width="400" height="400"></canvas>
    </>

initCanvas在画布子上方的上下文provider.js中创建画布对象

const initCanvas = (c) => {
    setCanvas(new fabric.Canvas(c));
    console.log('Canvas initialized', canvas);
}

应该将对象存储到什么状态，以便我可以通过上下文从其他子级使用它

const [canvas, setCanvas] = useState(false);

当功能肯定不会改变时，为什么函数调用会触发警告？

我如何确保initCanvas仅在将组件添加到DOM之后仅运行一次并且仅在没有收到react-hooks / exhaustive-deps警告的情况下运行？

当我仅在if语句中使用上下文时，也会出现相同的警告。

useEffect(() => {
    if(canvas) {
        canvas.isDrawingMode = drawMode;
        console.log("canvas.isDrawingMode: ", canvas.isDrawingMode);
    }
}, [drawMode]); //runs every time on context change

我需要在这里检查画布是否存在，因为useState是异步的，并且在初始化之前尝试访问它时遇到TypeError，但这会触发

Line 18:8: React Hook useEffect has a missing dependency: 'canvas'.

当我仅在if语句中访问context.canvas时（为什么它永远都不会改变），为什么在这里抱怨呢？

在useEffect上初始化对象

0 个答案: