reactjs - 为什么我会收到此错误？错误：第一个参数是必需的，并且必须是or元素

Question

我正在设置裁剪工具，但出现此错误：

错误：第一个参数是必需的，并且必须是<img>or<canvas> 元素。

为什么我会收到此错误？我认为问题在于渲染步骤，因为当我评论cropper的代码然后引用页面，然后我删除评论我可以看到我的代码正在工作，我试过useEffect但我的代码不能正确工作，在这里是我的代码：

  const [imageDestination, setImageDestination] = useState("");
  const [showCrop, setShowCrop] = useState(true);
  const imageElement = useRef();

  console.log(imageElement.current);

  const cropper = new Cropper(imageElement.current, {
    zoomable: false,
    scalable: false,
    aspectRatio: 1,
    crop: () => {
      const canvas = cropper.getCroppedCanvas();
      setImageDestination(canvas.toDataURL("img/png"));
    }
  });
  const onClickHandler = () => {
    props.getImage(imageDestination);
    setShowCrop(false);
  };

  return (
    <div>
      <div>
        {showCrop && (
          <img
            className={styles["image-container"]}
            ref={imageElement}
            src={props.src}
            alt={"source"}
          />
        )}
      </div> 

标签： reactjsimagefunctioncropperjscropper