react-table-library icon indicating copy to clipboard operation
react-table-library copied to clipboard

TypeError: e.values[t] is undefined

Open MarvinKlar opened this issue 1 year ago • 0 comments

I am using the useFilters component and got the following error:

TypeError: e.values[t] is undefined
    ye filterTypes.js:43
    ye filterTypes.js:43
    ye filterTypes.js:42
    a useFilters.js:225
    n useFilters.js:197
    w useFilters.js:256
    React 2
    Pe useFilters.js:185
    v publicUtils.js:91
    v publicUtils.js:90
    useTable useTable.js:331
    _u basic.table.js:175
    React 8
    unstable_runWithPriority scheduler.production.min.js:18
    React 10
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
[character:13024:25](https://XXXXXXXXXXXX/character)
    overrideMethod character:13024
    React 5
    unstable_runWithPriority scheduler.production.min.js:18
    React 4
    unstable_runWithPriority scheduler.production.min.js:18
    React 10
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
    
Uncaught TypeError: e.values[t] is undefined
    ye filterTypes.js:43
    ye filterTypes.js:43
    ye filterTypes.js:42
    a useFilters.js:225
    n useFilters.js:197
    w useFilters.js:256
    React 2
    Pe useFilters.js:185
    v publicUtils.js:91
    v publicUtils.js:90
    useTable useTable.js:331
    _u basic.table.js:175
    React 8
    unstable_runWithPriority scheduler.production.min.js:18
    React 10
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
[filterTypes.js:43:20](https://XXXXXXXXXXXX/static/node_modules/react-table/src/filterTypes.js)
    ye filterTypes.js:43
    some self-hosted:137
    ye filterTypes.js:43
    filter self-hosted:241
    ye filterTypes.js:42
    a useFilters.js:225
    reduce self-hosted:263
    n useFilters.js:197
    w useFilters.js:256
    React 2
    Pe useFilters.js:185
    v publicUtils.js:91
    forEach self-hosted:203
    v publicUtils.js:90
    useTable useTable.js:331
    _u basic.table.js:175
    React 8
    unstable_runWithPriority scheduler.production.min.js:18
    React 10
    unstable_runWithPriority scheduler.production.min.js:18
    React 3
    receiveMessage SelectChild.sys.mjs:265
    receiveMessage SelectChild.sys.mjs:495

I am using the filter like so:

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        page,
        canPreviousPage,
        canNextPage,
        pageOptions,
        pageCount,
        gotoPage,
        nextPage,
        previousPage,
        setPageSize,
        state: { pageIndex, pageSize },
        state,
        preGlobalFilteredRows,
        setGlobalFilter,
    } = useTable(
        {
            columns,
            data,
            defaultColumn,
            initialState: { pageIndex: 0, pageSize: 10 },
        },
        useFilters,
        useGlobalFilter,
        useSortBy,
        usePagination,
    )

The error was caused by that SelectColumnFilter:

export function SelectColumnFilter({
    column: { filterValue, setFilter, preFilteredRows, id },
  }) {
    const options = React.useMemo(() => {
      const options = new Set()
      preFilteredRows.forEach(row => {
        options.add(row.values[id])
      })
      return [...options.values()]
    }, [id, preFilteredRows])
  
    return (
      <select
        value={filterValue}
        onChange={e => {
          setFilter(e.target.value || undefined)
        }}
        className="form-control"
      >
        <option value="">Alle</option>
        {options.map((option, i) => (
          <option key={i} value={option}>
            {option}
          </option>
        ))}
      </select>
    )
}

How would I solve this error? Thanks for your help in advance! If you need more information, please let me know!

MarvinKlar avatar Feb 12 '24 15:02 MarvinKlar