打开React-Signature-Canvas时，React App有时会崩溃

问题描述

对不起，我不能很详细地描述问题的细节，因为它有时仅会发生，而且我无法重新创建它，这意味着我不知道从哪里开始尝试修复它。 / p>

它似乎只发生在真正便宜的android平板电脑上。 我有一个带有表单的页面，用户可以在其中填写详细信息。问题是在他们将名称输入文本字段后，然后一旦按下react-signature-canvas开始绘制其签名，应用程序就会崩溃（dosn不会一直崩溃）。 过去，我认为当机原因是当用户尝试在签名板上开始绘图时，键盘仍处于打开状态。

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

问题正文：

HTMLCanvasElement.r中

../../ src / helpers.ts在第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) => {

面包屑：

这是表格的样子：

解决方法

Formik作者在这里...

您可能正在从未安装的DOM元素（画布）设置状态。它不是一直都发生，因为这是比赛条件。在回调中使用画布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")
    );
  }
};

// ...

,

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

谢谢：）