使用复制到剪贴板功能时如何防止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

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

第一个：管理员ID

React hook 在其生命周期内会被多次调用，并且会根据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 是常量，我们可以使用 useState

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

或者我们必须从父组件将其作为 prop 传递，以便每次重新渲染它都不会改变。