React组件中点击下载按钮却在页面刷新时自动触发下载的问题

核心问题 #

你在DocumentDownloadButton组件的onClick属性里直接调用了downloadDocument(docId, fileName)，这会导致组件渲染（页面刷新）时立即执行该函数，而不是等待点击事件触发。React的事件回调需要传递函数引用，而非函数执行的结果。

修复方法 #

方法1：用箭头函数包裹回调

直接在onClick里用箭头函数包裹下载调用，确保只有点击时才执行：

return (
  <>
    <DownloadIconContainer onClick={() => downloadDocument(docId, fileName)}>
      <DownloadIconSmall />
    </DownloadIconContainer>
  </>
)

方法2：改造下载函数为返回函数的形式

如果想避免每次渲染创建新箭头函数，可以把downloadDocument改成返回函数的结构：

const downloadDocument = (id, file) => () => {
  apiFor('someApi')
    .get(`/documents/${id}`, { responseType: 'blob' }, {
      headers: {
        Accept: 'application/octet-stream' // 修正拼写错误：applicaton → application
      } })
    .then((response) => {
      const contentType = response.headers['content-type'] || 'application/octet-stream'
      const blob = new Blob([response.data], { type: contentType })
      return FileSaver.saveAs(blob, file)
    })
    .catch((error) => {
      console.error(error)
    })
}

// 使用时直接传递函数引用
return (
  <>
    <DownloadIconContainer onClick={downloadDocument(docId, fileName)}>
      <DownloadIconSmall />
    </DownloadIconContainer>
  </>
)

额外注意点 #

请求头里Accept字段存在拼写错误：applicaton应改为application，否则可能导致服务器返回的内容类型不符合预期，影响下载功能。

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