React-table 全局过滤器错误不是函数

Question

通过执行以下组件，我遇到了以下错误：

TypeError: setGlobalFilter is not a function.

react-table的版本是7.0.0，我照着做了，还是不行。我附上了我使用和编写的代码。

我的代码：

import React from 'react';
import { useTable, useGlobalFilter } from 'react-table';

function GlobalFilter({
  preGlobalFilteredRows,
  globalFilter,
  setGlobalFilter,
  }) {

  return (
    <span>
      Search:{' '}
      <input
        value={globalFilter || ''}
        onChange={e => {

          setGlobalFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
        }}
        placeholder={`records...`}
        style={{
          fontSize: '1.1rem',
          border: '0',
        }}
      />
    </span>
  )
}

table是：

const Table = ({columns, data}) => {

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
  preGlobalFilteredRows,
  setGlobalFilter,
  state
} = useTable({
  columns,
  data,
  useGlobalFilter
})

// Render the UI for your table
return (
  <>
  <div>

</div>
  <table {...getTableProps()} className="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
    <thead>
    <tr>
            <th
              colSpan={2}
              style={{
                textAlign: 'left',
              }}
            >
              <GlobalFilter
                preGlobalFilteredRows={preGlobalFilteredRows}
                globalFilter={state.globalFilter}
                setGlobalFilter={setGlobalFilter}
              />
            </th>
          </tr>
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map((row, i) => {
        prepareRow(row)
        return (
          <tr {...row.getRowProps()}>
            {row.cells.map(cell => {
              return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            })}
          </tr>
        )
      })}
    </tbody>
  </table>
  </>
)
}

export default Table;

为什么？

Answer 1

更改 table 文件中 useTable 的代码

} = useTable(
  {
   columns,
   data
  },
  useGlobalFilter
)

进一步你可以检查this example

React-table 全局过滤器错误不是函数

React-table Global Filter error is not function

reactjs

react-table