React App 在打开时有时会崩溃 react-signature-canvas

Question

抱歉，我不能非常具体地说明问题的细节，因为它有时会发生，而且我无法重新创建它，这意味着我不知道从哪里开始尝试修复它.

它似乎只发生在非常便宜的 android 平板电脑上。我有一个包含用户填写详细信息的表单的页面，问题发生在他们将自己的名字输入文本字段之后，然后一旦他们按下 react-signature-canvas 开始绘制他们的签名，应用程序就会崩溃（doesn '一直崩溃）。在过去，我认为当用户试图在签名板上开始绘图时键盘仍然打开时导致崩溃。

正如我所说，我发现它真的很难修复，因为我无法重新创建它，所以任何帮助都将不胜感激。我正在使用 React Hooks 和 Formik。

形式:

<h2>Guardian Full Name</h2>
            <MyTextField
              label="Guardian Full Name"
              name="parentName"
              required
            />
            <ErrorMessage
              component={"div"}
              className={"termsConditionText error"}
              name={"parentSignature"}
            />

            <SignaturePad setFieldValue={setFieldValue} />

SignaturePad:

    import React, { useRef, useState } from "react";
import { Button } from "semantic-ui-react";
import "../../pages/SignDisclaimerForm/SignDisclaimerForm.css";
import "./signaturePad.css";
import SignatureCanvas from "react-signature-canvas";

export const SignaturePad = props => {
  const [canvasImageUrl, setCanvasImageUrl] = useState([
    props.parentSignature || ""
  ]);
  let sigCanvas = useRef();

  const clearCanvas = () => sigCanvas.current.clear();
  const saveCanvas = async () => {
    if (sigCanvas.current.isEmpty()) return;
    document.getElementById("parentName").blur();

    props.setFieldValue(
      "parentSignature",
      sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
    );
    setCanvasImageUrl(
      sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
    );
  };

  return (
    <div>
      {!props.disabled && (
        <div>
          <h2 style={{ marginLeft: "5%" }}>Guardian Signature</h2>
          <div className={"sigContainer"}>
            <SignatureCanvas
              ref={sigCanvas}
              canvasProps={{ className: "sigPad" }}
              onEnd={saveCanvas}
            />
          </div>
          <Button
            style={{ marginLeft: "5%", marginTop: "2%", marginRight: "2%" }}
            type={"button"}
            onClick={clearCanvas}
            children={"Clear"}
          />
          <br />
          <br />
        </div>
      )}

      {canvasImageUrl[0] && (
        <div className={"signatureDisplay"}>
          <img
            src={canvasImageUrl}
            alt={"Guardian Signature"}
            style={{ height: "100%", width: "100%" }}
          />
        </div>
      )}
    </div>
  );
};

哨兵问题报告也在下面。

问题标题：

TypeError HTMLCanvasElement.r(src/helpers)
error
Cannot read property 'push' of undefined

问题Body:

../../src/helpers.ts 在 HTMLCanvasElement.r 行 85:17

 }
  // Attempt to invoke user-land function
  // NOTE: If you are a Sentry user, and you are seeing this stack frame, it
  //       means the sentry.javascript SDK caught an error invoking your application code. This
  //       is expected behavior and NOT indicative of a bug with sentry.javascript.
  return fn.apply(this, wrappedArguments);
  // tslint:enable:no-unsafe-any
} catch (ex) {
  ignoreNextOnError();
  withScope((scope: Scope) => {

面包屑：

表格如下所示：

Answer 1

Formik 作者在这里...

您可能正在从未安装的 DOM 元素（canvas）设置状态。它不会一直发生，因为它是一种竞争条件。在回调中使用方法之前，您应该检查 canvas ref 是否实际挂载。

// ...

const sigCanvas = useRef(null);

const clearCanvas = () => {
  if (sigCanvas.current != null) {
    sigCanvas.current.clear();
  }
};

const saveCanvas = async () => {
  // Ensure that the canvas is mounted before using it
  if (sigCanvas.current != null) {
    if (sigCanvas.current.isEmpty()) return;
    document.getElementById("parentName").blur();

    props.setFieldValue(
      "parentSignature",
      sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
    );
    setCanvasImageUrl(
      sigCanvas.current.getTrimmedCanvas().toDataURL("image/png")
    );
  }
};

// ...

Answer 2

感谢所有帮助过我的人，我真的很感激。我最后为了解决这个问题所做的只是让用户必须按下一个绿色按钮才能打开签名板。事实上，用户必须按下打开按钮，让键盘有足够的时间在用户开始在签名板上绘图之前完全关闭。

谢谢:)

React App 在打开时有时会崩溃 react-signature-canvas

React App crashes sometimes when opening react-signature-canvas

html

canvas

reactjs

signaturepad

formik