React结合html2canvas渲染canvas对象失败问题求助

Hey there! Let's break down the issues in your code and fix them step by step. You've got a few key problems here, mostly around async handling and how you're rendering the canvas objects.

1. Async Handling & State Mutation in getScreenshotHandler #

Your current code tries to update state right after calling html2canvas, but html2canvas runs asynchronously (it returns a Promise). That means your setState runs before the then callback pushes the new canvas to the array. Also, you're directly mutating the state array by pushing to canvasArray (which is a reference to this.state.canvasArray), which breaks React's state immutability rules.

Fix the handler like this:

getScreenshotHandler = () => {
  console.log("[Canvas Array from state length:]" + this.state.canvasArray.length);
  html2canvas(document.body).then((canvas) => {
    // Create a NEW array instead of mutating the existing state
    this.setState(prevState => ({
      canvasArray: [...prevState.canvasArray, canvas]
    }));
    console.log("[Updated Canvas Array length:]", this.state.canvasArray.length + 1);
  });
}

• We use setState with a functional updater to ensure we're using the latest state.
• We spread the existing array and add the new canvas, keeping state immutable.
• All state updates happen inside the then callback, so we only update state once the canvas is ready.

2. Incorrect Canvas Rendering in Screenshot Component #

You're trying to pass the canvas object as a ref, which is not how refs work. Refs are used to reference DOM elements inside your component, not to inject external canvas objects. Instead, here are two solid options:

Option 1: Convert Canvas to Data URL and Render as an Image

This is the simplest approach for displaying screenshots:

import React from 'react';
import './Screenshot.css';

const screenshot = (props) => {
  // Convert canvas to a base64 image URL
  const imageUrl = props.canvasObj.toDataURL();
  return (
    <div className="Screenshot">
      <img src={imageUrl} style={{ width: '10%', height: '10%' }} alt="Screenshot" />
    </div>
  );
};

export default screenshot;

Option 2: Draw the External Canvas onto the Component's Canvas

If you need to keep it as a canvas element (for further editing, etc.):

import React, { useEffect, useRef } from 'react';
import './Screenshot.css';

const screenshot = (props) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (canvasRef.current && props.canvasObj) {
      const ctx = canvasRef.current.getContext('2d');
      // Draw the external canvas onto our component's canvas
      ctx.drawImage(props.canvasObj, 0, 0, canvasRef.current.width, canvasRef.current.height);
    }
  }, [props.canvasObj]);

  return (
    <div className="Screenshot">
      <canvas 
        ref={canvasRef} 
        style={{ width: '10%', height: '10%' }}
        // Set canvas dimensions to match the original screenshot
        width={props.canvasObj.width}
        height={props.canvasObj.height}
      />
    </div>
  );
};

export default screenshot;

(Note: This uses React Hooks, but you can convert it to a class component if you prefer sticking with class syntax.)

3. Unstable Key in Screenshots Component #

Using Math.random() as a key is a bad practice—random keys cause React to re-mount components every time they render, which is inefficient and can lead to unexpected bugs. Instead, use a stable unique identifier. You can use the array index (good enough for static lists) or assign a unique ID when adding the canvas to state:

Fix with array index (quick solution):

const screenshots = this.props.canvasArray.map((canvas, index) => {
  return (
    <Screenshot key={index} canvasObj={canvas} />
  )
})

Better fix with unique ID:

// In App.js's then callback
this.setState(prevState => ({
  canvasArray: [...prevState.canvasArray, { id: Date.now(), canvas }]
}));

// Then in Screenshots component:
const screenshots = this.props.canvasArray.map(item => {
  return (
    <Screenshot key={item.id} canvasObj={item.canvas} />
  )
})

After making these changes, clicking the button should correctly capture the screenshot, add it to state, and render it in your Screenshot components.

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