React组件中获取Canvas元素报错为null，useEffect/useRef均无效求助

核心问题 #

你直接在组件函数体中访问ref.current，此时组件还没完成渲染，canvas元素还未挂载到DOM树上，所以ref.current是null，后续调用getContext、addEventListener自然会报错。哪怕换用useRef，不配合useEffect也会遇到同样问题——函数组件每次渲染时都会执行函数体代码，这时候DOM还没更新完成。

修复步骤 #

1. 用useRef替代createRef：函数组件中优先使用useRef，它会在组件整个生命周期内保持同一个引用；而createRef每次渲染都会生成新的引用实例，不适合函数组件场景。
2. 将canvas操作逻辑移入useEffect：useEffect的回调会在组件挂载完成（DOM已生成）后执行，此时ref.current才能正确指向canvas元素。同时要在useEffect的返回函数中清理事件监听，避免内存泄漏。
3. 设置合理的依赖数组：如果有变量（比如imageSizePx、r）变化时需要重新初始化canvas，就把它们加入依赖数组；如果只需要挂载时执行一次，依赖数组留空即可。

修复后的代码 #

import { useRef, useEffect } from "react";
import { useSelector } from "react-redux"; // 补全缺失的useSelector导入

export default function InteractiveElement() {
    const r = useSelector(state => state.r);
    const imageSizePx = 400;

    const canvasRef = useRef(null);

    useEffect(() => {
        const canvas = canvasRef.current;
        // 先判断canvas是否存在，避免空值报错
        if (!canvas) return;

        const chart = canvas.getContext('2d');
        
        const handleMouseDown = (e) => {
            if (e.clientX < imageSizePx / 2 && e.clientY < imageSizePx / 2) {
                const rect = e.target.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                console.log("X = ", getXTopLeft(x));
                console.log("Y = ", getYTopLeft(y));
            }
        };

        canvas.addEventListener('mousedown', handleMouseDown);

        // 组件卸载或依赖变化时移除监听，防止内存泄漏
        return () => {
            canvas.removeEventListener('mousedown', handleMouseDown);
        };
    }, [imageSizePx]); // 依赖imageSizePx，值变化时重新执行逻辑

    const getXTopLeft = (px) => {
        return -3 * (1 - px / (imageSizePx / 2));
    }

    const getYTopLeft = (px) => {
        return 3.3 * (1 - px / (imageSizePx / 2));
    }

    return (
        <div className="main__coord">
            <canvas className="interactive_element" ref={canvasRef} id="chart"/>
            <img src={require("../style/coordinate-form.jpg")} alt="coordinate-place"/>
        </div>
    )
}

额外提示 #

• 原代码漏了导入useSelector，补全后才能正常使用redux状态。
• 如果r的变化需要重新绘制canvas，可把r加入useEffect的依赖数组，在回调中补充对应的重绘逻辑。

内容的提问来源于stack exchange，提问作者grxuau