我在 react 表中使用 useSortBy 函数时遇到困难,我可以对表进行 3 次排序,但第三次该站点最终崩溃了。
sort 函数可以运行但是 3 次停止 chmore
我认为问题是内存泄漏
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow
} = useTable({ columns, data }, useFilters, useSortBy);
console.log(headerGroups)
return (
<div className={Styles.tableDesktopContainer}>
<table className={`resizable`} id={`eventListTable`} {...getTableProps()}>
<thead className={Styles.tableDesktopHeaderRow}>
{headerGroups.map((headerGroup) => (
<tr id="eventslist" {...headerGroup.getHeaderGroupProps() }>
{headerGroup.headers.map((column) => {
if (props.selectData.includes(column.Header)) {
return (
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
<div className={Styles.tableDesktopHeaderContent}>
<div className={`${Styles.tableDesktopHeaderTitle}`} >
{titleColumn = column.Header}
<div className={`${Styles.tableDesktopHeaderButton} gl-filter`} data-toggle="collapse" aria-expanded="false" data-target={`#${titleColumn}`} aria-controls={titleColumn} />
</div>
<div data-parent="#eventslist" className={`${Styles.tableDesktopHeaderCollapse} collapse`} id={titleColumn}>
<FilterBox data={header} title={titleColumn}>
{headerGroup.headers.map((column, i) => {
if (column.Header === titleColumn) {
return (
<div key={i} className={Styles.filterBoxContent}>
<div className={Styles.filterBoxContentTitle}>
{column.canFilter ? column.render("Filter") : ""}
</div>
</div>
)
}
})}
</FilterBox>
出现错误,页面没有响应