React / Material-ui 分页组件在本地工作但不在服务器上

Question

任何人都可以帮助解决我遇到的这个问题吗？

• [x] 该问题存在于最新版本中。
• [x] 我已经搜索了这个存储库的问题，并相信这不是重复的。

目前的行为😯

• 我正在使用 @material-ui/core: 4.11.2 和 @material-ui/lab: 4.0.0-alpha.57
• 分页在本地工作，但在构建并部署到服务器后根本不起作用
• 在服务器版本上，我在浏览器的控制台中收到此错误：

Uncaught TypeError: a is not a function at onClick (7f64add...e1.js:formatted:425)

看截图

当我点击链接 (7f64add...e1.js:formatted:425) 时，我得到了这个：

ActionsComponent: function(e) {
    var t = e.count
        , a = e.onChangePage;
    return H("div", {
        className: c.root
    }, H(v.a, {
        onClick: function(e) {
            a(e, 0)
        },
        disabled: 0 === r,
        "aria-label": "first page"
    }, "rtl" === l.direction ? H(B.a, null) : H(T.a, null)), H(v.a, {
        onClick: function(e) {
            a(e, r - 1)
        },
        disabled: 0 === r,
        "aria-label": "previous page"
    }, "rtl" === l.direction ? H(A.a, null) : H(N.a, null)), H(v.a, {
        onClick: function(e) {
            a(e, r + 1)
        },
        disabled: r >= Math.ceil(t / o) - 1,
        "aria-label": "next page"
    }, "rtl" === l.direction ? H(N.a, null) : H(A.a, null)), H(v.a, {
        onClick: function(e) {
            a(e, Math.max(0, Math.ceil(t / o) - 1))
        },
        disabled: r >= Math.ceil(t / o) - 1,
        "aria-label": "last page"
    }, "rtl" === l.direction ? H(T.a, null) : H(B.a, null)))
},

突出显示这部分：

onClick: function(e) {
    a(e, r + 1)
},

预期行为🤔

• 它应该以与本地相同的方式工作

繁殖步骤🕹

• 这是一个封闭的源代码项目，因此无法重现

环境🌎

• 我正在使用 react: 16.14.0 和 next: 9.5.5 和 Chrome 浏览器

Answer 1

问题已修复

我在这里找到了解决这个问题的方法： https : //github.com/mui-org/material-ui/issues/27192

它在页面顶部进行了解释，如下所示：

虽然 prop 弃用旨在成为一个非破坏性的更改，但 TablePagination 中存在一个极端情况，即重命名 onChangePage 属性会破坏现有代码。 具体来说，将 TablePagination 与自定义 ActionsComponent 一起使用会被破坏，因为提供给自定义 ActionsComponent 的 prop 已从 onChangePage -> onPageChange 更改。