React with Material UI Table Pagination 显示所有条目

Question

我有一个反应数据表，我最近在其中添加了分页，以便在您有很多条目时使用。 我想要通过在rowsPerPageOptions 下拉菜单中选择“all”来显示表中所有条目的选项。 到目前为止，我设法让所有条目的数量显示在菜单中。

我现在需要的是用字符串“all”标记entries.length对象，并entries.length显示在菜单中。 那可能吗？

当我尝试类似all.push({label: this.state.entries.length}); 我收到错误：

对象作为 React 子对象无效（找到：带有键 {label} 的对象）。 如果您打算渲染一组子项，请改用数组。

这让我觉得我不能使用带有菜单键的数组，所以我必须以不同的方式显示该值。

代码：

编辑：在 morteza ataiy 评论并指出错误后，将 all 变量移动到渲染函数中。

render() {
    return (
    let all = [5,10,25,50,(this.state.entries.length)];
        <div>
        <Table>
        </Table>
        </div>
        <TablePagination
                component="div"
                count={this.state.entries.length}

                rowsPerPage={this.state.rowsPerPage}
                page={this.state.page}
                backIconButtonProps={{
                    'aria-label': 'Previous Page',
                }}
                nextIconButtonProps={{
                    'aria-label': 'Next Page',
                }}
                onChangePage={this.handleChangePage}
                onChangeRowsPerPage={this.handleChangeRowsPerPage}
                labelRowsPerPage="Reihen pro Seite:"
                rowsPerPageOptions={all}

            );
    }

图片：最后一个条目是我想要改变的

请记住，我是 React 和 JavaScript 的新手，提前致谢！

Answer 1

您可以使用标签。 请参考代码

<TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />

您可以将 -1 传递给后端并编写关于此的查询。

Answer 2

只需在render方法中使用它即可：

render() {
    let all = [5,10,25,50,(this.state.entries.length)];
    return (
        <div>
        <Table>
        </Table>
        </div>
        <TablePagination
                component="div"
                count={this.state.entries.length}

                rowsPerPage={this.state.rowsPerPage}
                page={this.state.page}
                backIconButtonProps={{
                    'aria-label': 'Previous Page',
                }}
                nextIconButtonProps={{
                    'aria-label': 'Next Page',
                }}
                onChangePage={this.handleChangePage}
                onChangeRowsPerPage={this.handleChangeRowsPerPage}
                labelRowsPerPage="Reihen pro Seite:"
                rowsPerPageOptions={all}

            }