reactjs - React Table问题react table used de useSortBy hook
问题描述
我在使用 react 表中的 useSortBy 函数时遇到了困难,我可以对表进行 3 次排序,但第三次站点最终崩溃了。
功能排序工作但 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>
出现错误页面没有响应
解决方案
推荐阅读
- javascript - 如何干燥这些 JS 数学计算
- node.js - 如何在mogodb中动态传递字段名
- java - 支持代码向后兼容
- jquery - 用jquery交换输入按钮
- excel-formula - Excel SUMPRODUCT w/ COUNTIF 介于 2 个日期和第 2 个条件之间
- p2p - 使用哈希识别集群中的对等点
- ios - CircleCI + React Native + Xcode 10
- ruby-on-rails - 推送到 Elastic Beanstalk 时出现 Rails 捆绑错误
- reactjs - 为什么 CSS 不能正确应用于 React Material Web 组件中的按钮?
- sql-server-2008-r2 - 如果临时表退出,我该如何删除它?