React中Canvas仅在保存代码刷新后才加载？useEffect异常排查

你的问题核心是首次渲染时Canvas要么没等到图片加载完成就执行绘制，要么Canvas元素还未完全挂载，导致drawImage没生效；而热刷新时Canvas已经存在，图片加载完成后就能正常绘制。

具体问题点 #

1. 图片加载顺序错误：先设置bed.src再绑定bed.onload，如果图片被浏览器缓存，onload事件可能直接跳过，绘制逻辑不执行。
2. Canvas上下文可能为空：首次渲染时canvasRef.current可能还没指向真实DOM元素，导致context为null，drawImage无法运行。
3. useEffect依赖逻辑偏差：依赖reRenderValue如果首次渲染时没触发，整个绘制流程不会启动；但热刷新时依赖变化，逻辑才正常执行。

修复后的代码 #

const canvasRef = useRef(null);

useEffect(() => {
  // 先确保Canvas元素已挂载
  const canvas = canvasRef.current;
  if (!canvas) return;
  
  const context = canvas.getContext('2d');
  if (!context) return;

  fetch(`${process.env.REACT_APP_API_URL}/image/label`)
    .then(async (x) => {
      const resp = await x.json();
      if (resp !== undefined && resp.id === undefined && resp.data === undefined) {
        setNoImageAvailable(true);
      }
      setId(resp.id);
      // 不要直接修改currentImage，用React状态管理避免数据不同步
      // currentImage.id = resp.id;

      const bed = new Image();
      // 关键：先绑定事件再设置图片地址
      bed.onload = () => {
        console.log(bed);
        context.drawImage(bed, 0, 0);
      };
      // 新增错误处理，避免图片加载失败无提示
      bed.onerror = () => {
        console.error('图片加载失败');
      };
      bed.src = "https://images.unsplash.com/photo-1615874959474-d609969a20ed?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80";
    })
    .catch(err => {
      console.error('请求接口失败:', err);
    });
}, []); // 首次渲染就执行，若需根据特定状态触发，再调整依赖数组

// 返回Canvas元素
return <canvas id="canvas" ref={canvasRef}></canvas>;

额外优化建议 #

• 给Canvas设置固定宽高（比如width={580} height={xxx}），避免绘制的图片被拉伸变形。
• 新增图片加载状态（比如显示加载中动画），提升用户体验。
• 用React状态管理图片数据，不要直接修改对象属性，保证视图和数据同步。

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