React多输入框剪贴板复制需点击两次问题求助

我是Javascript新手，在React项目中为多个输入框各配置了剪贴板复制功能，但点击一次无法获取对应输入框的值，必须点击两次才能正常复制。以下是我的代码：

const [copyNo, setCopyNo] = useState(0);
const [copySuccess, setCopySuccess] = useState("");
const tokenRef = useRef(null);
const prodRef = useRef(null);
const SandBoxRef = useRef(null);
const SecretRef = useRef(null);
const SandBoxSecret = useRef(null);

function copyToClipboard(e) {
  {
    copyNo === 1 && tokenRef.current.select();
  }
  {
    copyNo === 2 && prodRef.current.select();
  }
  {
    copyNo === 3 && SecretRef.current.select();
  }
  {
    copyNo === 4 && SandBoxRef.current.select();
  }
  {
    copyNo === 5 && SandBoxSecret.current.select();
  }
  document.execCommand("copy");
  e.target.focus();
  setCopySuccess("copied");
}
useEffect(() => {
  {
    copyNo === 1 && tokenRef.current.select();
  }
  {
    copyNo === 2 && prodRef.current.select();
  }
  {
    copyNo === 3 && SecretRef.current.select();
  }
  {
    copyNo === 4 && SandBoxRef.current.select();
  }
  {
    copyNo === 5 && SandBoxSecret.current.select();
  }
}, [copyNo, setCopyNo]);

useEffect(() => {
  setTimeout(() => {
    setCopySuccess("");
  }, 2000);
}, [copySuccess]);

const [loading, setLoading] = useState(true);
useEffect(() => {
  setTimeout(() => {
    setLoading(false);
  }, 2000);
}, [loading]);

return (
 <Input ref={tokenRef} />
 <Button onClick={() => { setCopyNo(1);copyToClipboard();}} />

 <Input ref={prodRef} />
 <Button onClick={() => { setCopyNo(2);copyToClipboard();}} />

 <Input ref={SecretRef} />
 <Button onClick={() => { setCopyNo(3);copyToClipboard();}} />

 <Input ref={SandBoxRef} />
 <Button onClick={() => { setCopyNo(4);copyToClipboard();}} />

 <Input ref={SandBoxSecret} />
 <Button onClick={() => { setCopyNo(5);copyToClipboard();}} />
)

期望点击一次就能获取对应输入框的值并完成复制，请问问题出在哪里？

核心问题 #

React的setState是异步更新的，你在点击按钮时先调用setCopyNo，紧接着调用copyToClipboard，此时copyNo还没更新为新值，第一次执行copyToClipboard时用的还是旧的copyNo（初始是0），所以不会选中任何输入框，自然复制不到内容。第二次点击时，copyNo已经是上一次设置的值，所以能正常选中并复制。

另外document.execCommand("copy")已被废弃，推荐使用现代的navigator.clipboard.writeTextAPI，兼容性和可靠性更好。

优化方案 #

直接把要复制的输入框引用传给复制函数，不需要通过copyNo状态中转，逻辑更简洁，也彻底避免了异步更新的问题。

修正后的代码 #

import { useState, useRef, useEffect } from 'react';

function YourComponent() {
  const [copySuccess, setCopySuccess] = useState("");
  const tokenRef = useRef(null);
  const prodRef = useRef(null);
  const SandBoxRef = useRef(null);
  const SecretRef = useRef(null);
  const SandBoxSecret = useRef(null);

  // 通用复制函数，接收目标输入框的ref
  async function copyToClipboard(inputRef) {
    try {
      const text = inputRef.current.value;
      if (!text) {
        setCopySuccess("无内容可复制");
        return;
      }
      // 使用现代剪贴板API
      await navigator.clipboard.writeText(text);
      setCopySuccess("copied");
    } catch (err) {
      console.error('复制失败:', err);
      setCopySuccess("复制失败");
    }
  }

  useEffect(() => {
    if (!copySuccess) return;
    const timer = setTimeout(() => {
      setCopySuccess("");
    }, 2000);
    // 清理定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, [copySuccess]);

  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 2000);
    return () => clearTimeout(timer);
  }, []); // 移除loading依赖，避免无限触发定时器

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <Input ref={tokenRef} />
      <Button onClick={() => copyToClipboard(tokenRef)}>复制</Button>

      <Input ref={prodRef} />
      <Button onClick={() => copyToClipboard(prodRef)}>复制</Button>

      <Input ref={SecretRef} />
      <Button onClick={() => copyToClipboard(SecretRef)}>复制</Button>

      <Input ref={SandBoxRef} />
      <Button onClick={() => copyToClipboard(SandBoxRef)}>复制</Button>

      <Input ref={SandBoxSecret} />
      <Button onClick={() => copyToClipboard(SandBoxSecret)}>复制</Button>

      {copySuccess && <span>{copySuccess}</span>}
    </>
  );
}

export default YourComponent;

关键改进点 #

• 移除copyNo状态，直接传递输入框ref给复制函数，彻底解决异步更新导致的时序问题
• 替换废弃API为现代剪贴板API，提升兼容性和稳定性
• 为定时器添加清理函数，防止内存泄漏
• 优化loading的useEffect依赖项，避免无限循环
• 添加空内容判断和错误处理，提升用户体验

内容的提问来源于stack exchange，提问作者God_favorite_customer