Skip to content

TypeError: e.values[t] is undefined #147

@MarvinKlar

Description

@MarvinKlar

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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions