反应表全局过滤器错误不起作用

Question

通过执行以下组件，我遇到以下错误：TypeError：setGlobalFilter不是函数。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>
  )
}

表为：

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;

为什么？谢谢大家的合作。Samuele。

Answer 1

更改表文件中useTable的代码

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

此外，您还可以检查this example