反应表问题来反应使用 de useSortBy 钩子的表

时间:2021-06-18 17:08:02

标签: reactjs react-table

我在 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>

出现错误,页面没有响应

0 个答案:

没有答案