4.0.2 table设置横向滚动条并出现时，会出现分页table数据不刷新问题

[zilan830]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

点击分页，表格数据加载有问题。

What is expected?

数据分页正常显示

What is actually happening?

会出现以下问题：
1、有时，数据会出现在现有表格下面。
2、有时，数据显示不对，第三、四页数据和第一、二页一样。
3、我本地开发出现当滚动条处于可滚动时，点击分页发起请求，数据拿到后，Table表格数据不发生变化，其他分页器的数字会变。当滚动条不需要时，数据分页正常显示。

Environment	Info
antd	4.0.2
React	16.13.0
System	mac os 10.15.3
Browser	chorme Version 80.0.3987.122 (Official Build) (64-bit)

[zilan830]

同时发现设置scroll:'max-content' 会出现问题。我本地是出现空页面问题。
另外设置的宽度也不起作用，已按照 #17051 (comment) 更改过。旧版本3.25.X是可以的，升级到4.0.2失效。

[WanAn0902]

同问，只要设置了scroll={{ x: 1500 }}数据就不展示了，我是第一页数据都不会出现，不设置这个就可以正常显示，

[afc163]

没有重现其他问题。

1、有时，数据会出现在现有表格下面。

这一条确实有问题，按代码的写法，应该一页始终是 10 个条目才对，现在有时是 10 有时是 20、30 个条目，@zombieJ 有空看看。

[afc163]

2、有时，数据显示不对，第三、四页数据和第一、二页一样。

3、我本地开发出现当滚动条处于可滚动时，点击分页发起请求，数据拿到后，Table表格数据不发生变化，其他分页器的数字会变。当滚动条不需要时，数据分页正常显示。

同时发现设置scroll:'max-content' 会出现问题。我本地是出现空页面问题。

这些我在 https://codesandbox.io/s/antd-reproduction-template-go4p4 都没有重现出来。

[zombieJ]

@zilan830 重新安装一下依赖，这个应该已经修掉了。

[zombieJ]

没有重现其他问题。

1、有时，数据会出现在现有表格下面。

这一条确实有问题，按代码的写法，应该一页始终是 10 个条目才对，现在有时是 10 有时是 20、30 个条目，@zombieJ 有空看看。

代码里 data 用的是 push 所以列表变长了：

data.push({
  key: i,
  name: `Edrward ${i}`,
  age: i,
   address: `LondonLondonLondonLondonLondonLondonLondon Park no. ${i}`
});

异步加载 data 是替换，不是增加。

ref: https://ant.design/components/table-cn/#components-table-demo-ajax

[afc163]

看一下 3.x 的逻辑：https://codesandbox.io/s/antd-reproduction-template-fs2we

1. 当 dataSource 长度大于 pagination pageSize 时，slice 一下数据到当前页
2. 当 dataSource 长度小于 pagination pageSize 时，粗暴全量显示。

这段逻辑的 3.x 代码：

ant-design/components/table/Table.tsx

Line 469 in f520032

// 当数据量少于等于每页数量时，直接设置数据

另外，例子中没有修改 pageSize，默认应该继承，table 的列条目不应该超过 10 个。

[zombieJ]

3.x 里面你设置 pageSize 10，然后 data 给 20，点击到第三页显示就不正常了(其实第二页内容也是和异步有出入的)。这个本身就是不对的行为，没必要做兼容。但是可以加一个 warning，告知用户使用的不对。

[afc163]

👌，这个理解。

另外，例子中没有修改 pageSize，默认应该继承，table 的列条目不应该超过 10 个。

这个还是可以改，显示数不应该超过 pageSize。

[zilan830]

例子确实忘记将data置空再添加了。已重新安装依赖，但是本地还是会出现在有横向滚动条出现时，表格数据不更新的问题。

这是我封装的table

import React, { PureComponent } from "react"
import { Table } from "antd"
import PropTypes from "prop-types"

class STable extends PureComponent {
  constructor(props) {
    super(props)
  }

  renderPagination = () => {
    const { totalPage, currentPage } = this.props
    return {
      current: currentPage,
      total: totalPage,
      showTotal: total => `共${total}条记录`,
      showQuickJumper: true
    }
  }

  handleChange = pagination => {
    this.props.onChange(pagination)
  }

  render() {
    const {
      columns,
      dataSource,
      loading,
      rowKey,
      noPagination,
      ...rest
    } = this.props
    return (
      <Table
        {...rest}
        columns={columns}
        dataSource={dataSource}
        loading={loading}
        pagination={!noPagination && this.renderPagination()}
        rowKey={record => (rowKey ? record[rowKey] : record.id)}
        onChange={this.handleChange}
      />
    )
  }
}

STable.propTypes = {
  columns: PropTypes.array.isRequired,
  dataSource: PropTypes.array.isRequired,
  loading: PropTypes.bool.isRequired,
  totalPage: PropTypes.number,
  currentPage: PropTypes.number,
  rowKey: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  noPagination: PropTypes.bool
}

STable.defaultProps = {
  columns: [],
  dataSource: [],
  loading: false,
  totalPage: 0,
  currentPage: 0,
  rowKey: "",
  noPagination: false
}

export default STable

这是我本地出现的问题展示