Konva图像在加载时显示为黑色

Question

我正在尝试使用ImageKonva将网格作为背景，并用图案填充它。问题是，当我加载画布时，ImageKonva看起来完全是黑色的，并且在添加子元素后它就会立即显示。

import React from 'react'
import { Stage, Layer, Image as ImageKonva } from 'react-konva'

const Canvas = ({ children, width, height, onClick }) => {
  const image = new Image()

   // this hash is the image of a grid
  image.src =   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQoU2NkIAK8e/fuPyMR6hhGFeINJXDwgAhiwhIAOZAl5YYZd5AAAAAASUVORK5CYII='


  return (
    <Stage width={width} height={height}>
        <Layer>
          <ImageKonva
            preventDefault={false}
            width={width / 2}
            height={width / 2}
            fillPatternImage={image}
            onClick={onClick}
          />
          {children}
        </Layer>
    </Stage>
  )
}

我已经创建了此代码和框，您可以在其中查看问题：https://codesandbox.io/s/angry-river-kszh0?file=/src/App.js

注意：它并不总是可复制的，（无法弄清楚是什么模式）。有时不会发生，我需要打开chrome的控制台并刷新页面以使其实现。

您将看到黑框，只有在单击按钮后，它才会显示网格。该按钮仅添加一个子元素。从那里开始，图像将始终显示。仅在第一次加载期间会发生此问题。

Answer 1

[我相信我已经弄清楚了，看来我不认为可以异步添加图像...所以当我加载画布时，图像还不存在。

因此解决方案是通过使用ImageKanvas对象设置onload方法仅在加载图像后才加载image

const Canvas = ({ children, width, height, onClick }) => {
  const [loadGrid, setLoadGrid] = useState(false);
  const image = new Image();

  // this hash is the image of a grid
  image.src =
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQoU2NkIAK8e/fuPyMR6hhGFeINJXDwgAhiwhIAOZAl5YYZd5AAAAAASUVORK5CYII=";

  image.onload = () => {
    setLoadGrid(true);
  };

  return (
    <Stage width={width} height={height}>
      <Layer>
        {loadGrid && (
          <ImageKonva
            preventDefault={false}
            width={width / 2}
            height={width / 2}
            fillPatternImage={image}
            onClick={onClick}
          />
        )}
        {children}
      </Layer>
    </Stage>
  );
};

https://codesandbox.io/s/wild-wind-br2qo?file=/src/App.js