无法使用 MaterialTable 中的 onChange 函数转到下一页

Question

我正在尝试更改 MaterialTable 中的页面，但我无法这样做。虽然，页面大小功能有效，但页面更改功能无效。

这是我的状态：

constructor(props) {
    super(props)
    this.state = {
        status: false,
        message: "",
        page: 0,
        pageSize: 5,
    }
}

在 MaterialTable 中，我有这个：

<MaterialTable
                            title=""
                            page={this.state.page}
                            totalCount={this.props.operations.ids ? this.props.operations.ids.length : 0}
                            columns={[
                                {
                                    title: 'Sr No.', field: 'serialNumber', render: rowData => {
                                        return _.findIndex(renderingData, { "id": rowData.id }) + 1
                                    }
                                },
                                { title: 'Time Stamp', field: 'date', render: rowData => { return moment(rowData.date).format("YYYY/MM/DD hh:mm a") } },
                                { title: 'Details', field: 'name' },
                                {
                                    title: 'View Details', field: 'viewDetails', render: rowData => {
                                        return <Button
                                            variant="contained"
                                            color={"primary"}
                                            onClick={() => this.props.setTab(rowData)}
                                        >View</Button>
                                    }
                                },
                            ]}
                            onChangePage={(page, pageSize) => {
                                this.setState({ ...this.state, page, pageSize})
                            }}
data={renderingData}
/>

如果需要对此进行任何修改，请告诉我。我还是没能解决问题

Answer 1

点击下一步按钮，您还需要增加页码

onChangePage={(event,page ) => { this.setState({ ...this.state, page}) }}

也有变化 function handleChangeRowsPerPage(event) { setRowsPerPage(+event.target.value); }

Answer 2

好的，所以问题是进入 Material Table 的数据即使在单击下一页按钮后也是一样的。我通过在数据中添加这个来绕过它。其余代码相同。

data={renderingData.slice(this.state.page*this.state.pageSize, this.state.page*this.state.pageSize + this.state.pageSize)}

此代码可确保在您单击下一页时出现新数据。

无法使用 MaterialTable 中的 onChange 函数转到下一页

Unable to go to next page using the onChange function in MaterialTable

reactjs

material-ui

material-table