reactjs - 动态更新 react 表中可用记录数的计数

Question

我是 React JS 的初学者。我正在使用 react 表

如何显示表中可用记录的总数并在过滤时更新计数？

我试图添加数组长度——总记录数:{this.props.data.length}。但是每次过滤表数据时都不会重新渲染我的数组长度。即使我过滤它也保持不变。

       const paginationOptions = {
           showPagination: false,
             };

           const filterOptions = {
           filterable: true,
        defaultFilterMethod: (filter, row, column) => {
           const id = filter.pivotId || filter.id;
           return row[id] !== undefined
  ? String(row[id])
      .toLowerCase()
      .includes(filter.value.toLowerCase())
  : true;
         },
           };

      type DefaultReactTableProps = {
       data: Array<{}>,
          history?: {}, // required to make a row or cell linkable 
               by pushing to history onClick
            };

       class DefaultReactTable extends React.Component {
             props: DefaultReactTableProps;
               render() {
              console.log('Render',this.props);
                const noFilter = this.props.noFilter ? null : 
               filterOptions;
             return (
             <ReactTable
             {...paginationOptions}
              {...noFilter}
              defaultPageSize={this.props.data.length}
            minRows={0}
            {...this.props}
               />
             );
             }
             }

我需要在过滤后立即更新记录总数。我该怎么做？

Answer 1

一个更简单的方法是从 useTable 解构行并使用 rows.length得到总数。

const { rows } = useTable({ columns, data })
console.log(rows.length)