javascript - 使用复制到剪贴板功能时如何防止UUID改变状态？

Question

我设法将生成的 UUID 复制到剪贴板中，但每当我单击按钮时，即使页面没有刷新，UUID(和 QR 代码)也会发生变化。如何防止UUID改变其状态？请引用以下代码；

import React, { useState } from "react";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import FileCopyIcon from "@material-ui/icons/FileCopy";
import { v4 as uuid } from "uuid";
import QRCode from "react-qr-code";
import { CopyToClipboard } from "react-copy-to-clipboard";

export default function QRGenerator() {
  const adminId = uuid();

  const [qrcode, setQrcode] = useState({
    value: "",
    copied: false,
  });

  return (
    <div>
      <CopyToClipboard
        text={adminId}
        onCopy={() => setQrcode({ copied: true })}
      >
        <Button>
          <FileCopyIcon />
        </Button>
      </CopyToClipboard>

      <Typography align="center" variant="caption" paragraph="true">
        Admin ID : {adminId}
        {qrcode.copied ? <span style={{ color: "red" }}>Copied.</span> : null}
      </Typography>
      <QRCode value={adminId} />
    </div>
  );
}

Answer 1

您的代码片段有两个问题。

第一个:adminId

React hook 在其生命周期内会被多次调用，并且会根据 uuid() 赋予不同的值

要解决这个问题，您可以使用 useState 或 useRef 或将其移至 QRGenerator 函数外部。

第二期:更新状态

setQrcode({ Copy: true })} 表示您将 qrcode 值替换为 { Copy: true} 值 未定义

下面的代码片段将是上述问题的解决方案

export default function QRGenerator() {
  const [adminId] = useState(uuid()); // or useRef(uuid());

  const [qrcode, setQrcode] = useState({
    value: "",
    copied: false,
  });

  return (
    <div>
      <CopyToClipboard
        text={adminId}
        onCopy={() => setQrcode({...qrcode, copied: true })} // this change only `copied` value
      >
        <Button>
          <FileCopyIcon />
        </Button>
      </CopyToClipboard>

      <Typography align="center" variant="caption" paragraph="true">
        Admin ID : {adminId}
        {qrcode.copied ? <span style={{ color: "red" }}>Copied.</span> : null}
      </Typography>
      <QRCode value={adminId} />
    </div>
  );
}

希望这有帮助!