React页面点击复制按钮时重复发起API请求的问题解决咨询

看起来你遇到了一个挺烦人的问题——点击复制API密钥的按钮时，会意外触发重复的API请求。我帮你分析下可能的原因，以及对应的解决办法：

可能的原因1：React Query的自动重取机制 #

React Query默认会在一些场景下自动重新发起请求，比如组件重新挂载、窗口焦点变化、网络重连时。当你点击复制按钮时，setCopied会触发组件重渲染，或者某些操作意外触发了React Query的自动重取逻辑，导致重复请求。

解决办法：
在useQuery的配置中，关闭不必要的自动重取选项，让查询只在初始加载或者手动触发时才执行：

const { data: apiKeyData, isLoading } = useQuery({
  queryKey: ['APIKeyByID', APIKeyID],
  queryFn: () => queryAPIKeyByID(APIKeyID),
  // 关闭自动重取的相关配置
  refetchOnMount: false,
  refetchOnWindowFocus: false,
  refetchOnReconnect: false,
  // 设置无限缓存时间，确保缓存数据不会被轻易清空
  staleTime: Infinity,
});

可能的原因2：Button组件的默认类型问题 #

虽然MUI的Button组件默认type是button，但如果组件不小心嵌套在Form标签内，或者存在特殊的DOM结构，可能会被浏览器默认识别为submit按钮，点击时触发表单提交，导致页面刷新/组件重新挂载，进而重新发起API请求。

解决办法：
给复制按钮明确指定type="button"，彻底避免意外的提交行为：

<Button
    onClick={handleCopy}
    className="ml"
    type="button" // 明确设置按钮类型为button
>
    {copied ? "Copied!" : "Copy"}
</Button>

额外的优化建议 #

另外，你可以给handleCopy函数加上错误处理，防止复制失败的情况（比如浏览器不支持剪贴板API）：

const handleCopy = async () => {
  try {
    await navigator.clipboard.writeText(apiKeyData.api_token);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  } catch (err) {
    console.error('复制失败:', err);
    // 可以在这里给用户提示复制失败的友好信息
  }
};

备注：内容来源于stack exchange，提问作者Peter Penzov