React中Material Table添加点击事件实现文件下载报错求解

错误根因 #

你触发报错的核心原因是actions配置中onClick回调直接引用的file是表格绑定的整个数据集数组，而非当前点击行对应的单条文件对象，因此file.name取值为undefined，拼接后的请求URL携带undefined，后端无法找到对应路径就抛出了ENOENT错误。
另外可额外检查：你定义的文件数据集变量名为files（数组），但表格data属性绑定的是file，如果是变量名笔误也需要先修正对应绑定关系。

正确实现方式 #

Material Table的actions.onClick回调默认提供两个入参，第二个入参就是当前触发点击操作的行数据对象，直接从该参数中取对应字段拼接下载链接即可，修正后的代码如下：

{files && ( // 修正变量名和你定义的数据集对应
<Fragment>
<MaterialTable
columns={tableColumns}
data={files} // 和数据集变量名保持一致
title="Material Table - Custom Filter Component"
options={{search: false, filtering: true }}

actions={[
  {
    icon: 'save',
    tooltip: '保存文件',
    // 第二个参数rowData就是当前行的单条文件数据
    onClick: (event, rowData) => window.open('http://localhost:5000/files/' + rowData.name, '_blank').focus()
  }
]}
/>
</Fragment>)}

修改后点击每行的保存按钮，就会自动取当前行的name字段拼接下载链接，不会再出现undefined的问题。

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