onClick 被触发多次反应参考答案

【问题标题】：onClick is getting triggerd multiple times react refonClick 被触发多次反应参考
【发布时间】：2022-01-06 07:22:32
【问题描述】：

我正在下载的地方有下载功能

const csvLink = createRef();

const dropdown = (
  <div onClick={refetch}>
    {safeLabel(messages.csv)}
    <Icon name="pull" />
    {isSuccess ? <CSVLink ref={csvLink} data={data?.data}></CSVLink> : null}
  </div>
);

const onsuccess = (response) => {
  csvLink?.current?.link?.click();
};

const { refetch, data, isSuccess } = useQuery(
  "apicall",
  () => fetchData(headers),
  {
    enabled: false,
    onSuccess: onsuccess
  }
);

所以，在这里，当我点击图标拉时，查询被调用并向我发送一个响应，我将它传递给csvLink 并尝试下载 csv。现在由于在查询成功时调用了csvLink?.current?.link?.click();，因此refetch 在无限循环中被调用。在哪里调用此点击以及如何解决此问题？

谢谢。

【问题讨论】：

根据您的代码，csvDownloadSuccess 称为onSuccess。不应该是这样吗？ ` const { refetch, data, isSuccess } = useQuery( 'apicall', () => fetchData(headers), { enabled: false, onSuccess: onSuccess, }, );`
对不起，我写错了，正在编辑它。
@Cid 更新了问题。

标签： javascript reactjs csv react-query

【解决方案1】：

您应该使用 useRef 而不是 createRef

const csvLink = useRef();

createRef：函数在每次重新渲染时创建一个新的 ref。

useRef：函数始终使用相同的 ref。它在功能组件的重新渲染之间保存它的值，并且不会为每次重新渲染创建一个新的 ref 实例。

【讨论】：