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

【问题标题】：How to prevent UUID from changing state when using copy-to-clipboard function?使用复制到剪贴板功能时如何防止 UUID 改变状态？
【发布时间】：2020-06-02 13:46:29
【问题描述】：

我设法将生成的 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>
  );
}

【问题讨论】：

标签： javascript reactjs react-hooks qr-code

【解决方案1】：

您的代码 sn-p 有两个问题。

第一名：adminId

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

要解决它，您可以使用useState 或useRef 或将其移至QRGenerator 函数之外。

第二个问题：更新状态

setQrcode({ copied: true })} 表示您将用值{ copied: true} 替换值qrcode 值undefined

下面的sn-p将是解决上述问题的方法

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

希望这会有所帮助！

【讨论】：

感谢您的详细解释。我不知道我们可以在 useState 挂钩中传递 1 个参数以使其保持不变。
不客气！ :)...请尝试找出useMemo 在您的情况下它可能比useState 更好用
我尝试过使用 useMemo 但我不太明白数组中依赖项的含义。它虽然有效。 const adminId = useMemo(( ) => uuid( ),[ ]);
空数组[]表示组件挂载后只会调用一次。

【解决方案2】：

每次状态改变时，都会调用渲染函数。因此再次调用 uuid 并对其进行更改。如果需要 uuid 保持不变，我们可以使用 useState

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

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

【讨论】：

现在可以使用了。我一直认为，如果我们使用 useState，我们需要提供 2 个参数，即 state 和 setState，并且我们只有在想要更改某物的状态时才使用它。
useState 为我们提供了两个值的数组，第一个是值，第二个变量用于设置值。这里我们只取第一个。您可以检查破坏性分配 es6 dev.to/sarah_chima/destructuring-assignment---arrays-16f