首页 > 解决方案 > 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>

出现错误页面没有响应

标签: reactjsreact-table

解决方案


推荐阅读