mui 数据表 无法读取未定义的属性(读取"下载")

Question

我使用"react": "^17.0.2",和"mui-datatables": "^4.2.2",

我需要下载(导出)数据表中没有显示的数据。

这是我代码的一部分:

[
// ..... other columns
{
label: "Détail IIG",
name: "reference",
options: {
download: false,
customBodyRender: (value) => {
if (currentUserId === value.user.id) {
if (value.calculated) {
return (
<Tooltip title="les résultats IIG de votre dossier sont disponibles">
<Link
className="custom-green-iig-link"
to={`/${value.slug}/project/iig`}
>
<FontAwesomeComponent
icon={faEye}
size="lg"
color="white"
/>
</Link>
</Tooltip>
);
} else {
return null;
}
} else {
if (value.calculated) {
return (
<Tooltip title="Les résultats IIG de ce dossier sont disponibles">
<Link
className="custom-green-iig-link"
to={`/${value.slug}/project/iig`}
>
<FontAwesomeComponent
icon={faEye}
size="lg"
color="white"
/>
</Link>
</Tooltip>
);
} else {
return null;
}
}
},
setCellHeaderProps: (value) => ({
style: {
fontWeight: "bold",
textAlign: "center",
whiteSpace: "nowrap",
},
}),
setCellProps: (value) => ({
style: {
textAlign: "center",
},
}),
},
},
{
name: "pilierE",
options: {
empty: false,
download: true,
filter: false,
sort: false,
display: false,
viewColumns: false,
},
},
];

这是onDownload函数:

onDownload: (buildHead, buildBody, columns, rows) => {
console.log(columns);
const all = [];
if (selectedRows.length) {
selectedRows.forEach((row, index) => {
let object = {
index: index,
data: row,
};
console.log("OBJ");
all.push(object);
});
return "uFEFF" + buildHead(columns) + buildBody(all);
} else {
setOpenExportAlert(true);
return false;
}
},

所以，我使用download: true,和display: false,来隐藏显示列和启用，禁用下载。

当前我得到这个错误:

> utils.js:91 Uncaught TypeError: Cannot read properties of undefined
>     (reading 'download')
>     at utils.js:91:1
>     at Array.filter (<anonymous>)
>     at utils.js:87:1
>     at Array.reduce (<anonymous>)
>     at i (utils.js:84:1)
>     at Object.onDownload (Home.js:342:1)
>     at buildCSV (utils.js:105:1)
>     at createCSVDownload (utils.js:130:1)
>     at TableToolbar.js:193:1
>     at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)

如何修复这个错误?

Answer 1

I fix the problem, i have filterOptions like this , so i set useDisplayedColumnsOnly and useDisplayedRowsOnly to true instead of false
downloadOptions: {
filename: "IIG-EXPORT.csv",
separator: ";",
filterOptions: {
useDisplayedColumnsOnly: false, // it was true
useDisplayedRowsOnly: false, // it was true
},
},