React 18中useEffect内Image onload不触发及src设置报错求助

核心问题1：错误使用require加载base64图片 #

你用require(imgUrl)设置图片src完全错误——require是webpack用来加载项目本地静态资源的工具，而base64字符串本身就是合法的图片URL，不需要经过模块解析。这直接导致了Cannot find module 'data:image/jpeg;base64,undefined'的同步错误，根本没走到图片加载流程，所以image.onload和image.onerror都不会触发。

核心问题2：card.content出现undefined #

错误提示里的undefined说明拼接imgUrl时，card.content还没拿到有效值。虽然你说useEffect已获取数据，但函数组件的闭包特性可能让handleDraw捕获了旧的card值，或者调用handleDraw时card.content还没更新完成。另外你定义了handleDraw的参数imageData却完全没用到，应该直接用传入的imageData拼接URL，而非依赖外部的card变量。

修复后的代码 #

const handleDraw = (imageData) => {
    console.log("handleDraw was called");
    // 用React ref替代getElementById，更符合React规范
    const img = cardImageRef.current;
    const canvas = canvasRef.current;
    if (!canvas || !img || !imageData) return; // 兜底判断，避免空值报错

    const context = canvas.getContext("2d");
    // 确保img宽高加载完成后再计算比例
    const factor = Math.min(canvas.width / img.width, canvas.height / img.height);
    const image = new Image();
    
    image.onload = function() {
        console.log("Drawing image....card content is ", imageData);
        // 用新创建的image宽高更准确，避免依赖隐藏img的状态
        context.drawImage(image, 0, 0, image.width * factor - 10, image.height * factor - 20);
        context.font = "30px Arial";
        context.fillStyle = "red";
        context.fillText(message, 50, 50);
    };
    image.onerror = function(err) {
        console.error("图片加载失败:", err);
    };
    // 直接用传入的imageData拼接URL，去掉多余的require
    const imgUrl = `data:image/jpeg;base64,${imageData}`;
    image.src = imgUrl;
};

额外优化建议 #

1. 用React ref获取DOM元素：在组件里定义const cardImageRef = useRef(null)，给隐藏的img标签加上ref={cardImageRef}，替代document.getElementById，避免DOM查找的不确定性。
2. 确保调用时机正确：在useEffect里获取到base64数据后，先判断数据存在再调用handleDraw：

   useEffect(() => {
       const fetchImage = async () => {
           const res = await fetch('你的API地址');
           const data = await res.json(); // 假设返回的data包含base64内容
           if (data.base64Content) {
               handleDraw(data.base64Content);
           }
       };
       fetchImage();
   }, []);
   

3. 避免闭包陷阱：如果message或其他外部变量在组件更新后变化，建议把它们作为handleDraw的参数传入，或者用useRef保存最新值，避免捕获旧值。

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