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

Question

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

它似乎只发生在非常便宜的安卓平板电脑上。我有一个带有表单的页面，用户可以在其中填写详细信息，问题发生在他们将姓名输入文本字段之后，然后一旦他们按下 react-signature-canvas 开始绘图他们的签名应用程序崩溃(不会一直崩溃)。在过去，我认为当用户尝试在签名板上开始绘图时键盘仍然打开时导致崩溃。

正如我所说，我发现它真的很难修复，因为我无法重新创建它，所以任何帮助都将不胜感激。我正在使用 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} />

签名板:

    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

问题正文:

../../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")
    );
  }
};

// ...