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

Question

我成功地将生成的UUID复制到剪贴板中，但每当我点击按钮时，即使页面没有刷新，UUID（和二维码）也会改变。如何防止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钩子在它的生命周期中会被多次调用，并且会根据不同的情况被赋予不同的值。uuid()

要解决这个问题，你可以使用 useState 或 useRef 或移到外面 QRGenerator 功能。

第二个问题：更新状态

setQrcode({ copied: true })} 意味着你将取代 qrcode 价值与 { copied: true} 有价值 undefined

下面的片段将是解决上述问题的方法。

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>
  );
}

希望对大家有所帮助!

Answer 2

每当状态发生变化时，渲染函数就会被调用，所以uuid会被再次调用并发生变化。如果你需要uuid是不变的，我们可以使用State-Rex函数来实现。

  const [adminId] = useState(uuid());

或者我们必须从父组件中把它作为道具传递给它，这样每一次reerender它都不会改变。