Ant-design-pro: 🧐[问题]使用protable后,翻页后每一页的数据量不对

Created on 1 Dec 2020  ·  6Comments  ·  Source: ant-design/ant-design-pro

🧐 使用protable后,翻页后每一页的数据量不对

比如设置一个显示10条数据,刚进入页面的时候是正常的,翻页后就会显示15条,再回到第一个就会显示全部数据,感觉有某个缓存之类的没有清除掉一样。
哪怕在onchange后,重新获取数据改 ret.data 的数量为10条,他仍然会显示15条数据

💻 示例代码

  <ProTable<TableListConsulItem>
    headerTitle="配置,项目/环境 -> 值"
    actionRef={actionRef}
    rowKey="proj"
    search={{
      labelWidth: 120,
    }}
    toolBarRender={() => [
      <Button type="primary" onClick={() => 
          { handleUpdateModalVisible(true);
            setStepFormValues({this});
          }}>
        <PlusOutlined /> 新建
      </Button>,
    ]}
    request={
        (params ) => queryRule({ ...params }).then(res =>{

            var ret = {}
            ret.total = res.length
            ret.success = true
            ret.data = res  
            ret.pageSize = params.pageSize

            for (var i = 0; i < res.length; i++)
            {
                ret.data[i].key = ret.data[i].ModifyIndex
                ret.data[i].proj = ret.data[i].Key.split('/')[0]
                ret.data[i].env = ret.data[i].Key.split('/')[1]
                var _value = ret.data[i].Value
                try
                {
                    ret.data[i].value = _Base64.decode(_value)
                }
                catch(err)
                {
                    ret.data[i].value = _value
                }
            }

            return ret
        })//then
        }//request
    onChange ={(page,pageSize) => 
          { 

          }}
    columns={columns}
  />

🚑 其他信息

🕵🏻‍♀️ question

All 6 comments

onChange 里面是不能修改的。而且你这个写的很奇怪,你不能修改引用的,不然可能被浅拷贝。你最好这样,
另外 total 应该是服务器告诉你的总共需要多少条,如果你没有服务器分页,最好不要设置

const request = async (params) => {
  const res = await queryRule({ ...params });
  const data = res.map((item) => {
    const value = _Base64.decode(ret.data[i].Value);
    return {
      ...item,
      key: item.ModifyIndex,
      proj: item.Key.split("/")[0],
      env: item.Key.split("/")[1],
      value,
    };
  });

  return {
    data,
    success: true,
    pageSize: params.pageSize,
  };
};

onChange 里面是不能修改的。而且你这个写的很奇怪,你不能修改引用的,不然可能被浅拷贝。你最好这样,
另外 total 应该是服务器告诉你的总共需要多少条,如果你没有服务器分页,最好不要设置

const request = async (params) => {
  const res = await queryRule({ ...params });
  const data = res.map((item) => {
    const value = _Base64.decode(ret.data[i].Value);
    return {
      ...item,
      key: item.ModifyIndex,
      proj: item.Key.split("/")[0],
      env: item.Key.split("/")[1],
      value,
    };
  });

  return {
    data,
    success: true,
    pageSize: params.pageSize,
  };
};

照您这改了一下,翻页后数据数量还是不对。

<PageContainer>
  <ProTable<TableListConsulItem>
    headerTitle="配置,项目/环境 -> 值"
    actionRef={actionRef}
    rowKey="proj"
    search={{
      labelWidth: 120,
    }}
    toolBarRender={() => [
      <Button type="primary" onClick={() => 
          { handleUpdateModalVisible(true);
            setStepFormValues({this});
          }}>
        <PlusOutlined /> 新建
      </Button>,
    ]}
    const request = {async (params) => {
        const res = await queryRule({ ...params });
        const data = res.map((item) => {
        const value = _Base64.decode(item.Value);
        return {
            ...item,
            key: item.ModifyIndex,
            proj: item.Key.split("/")[0],
            env: item.Key.split("/")[1],
            value,
            };
        });
        return {
            data,
            success: true,
            pageSize: params.pageSize,
            };
        }
    }
    columns={columns}
  />

补充一个就是,就算我返回了10个数字,只要我之前有别的返回,他翻页后就可能会把之前的数据加进去,导致数据总数不对。

比如刚开始是正常的20个数据,我翻到第二页,再切回第一页,就会把所有数据展示出来。
因为服务器本身没有翻页的支持,一次就会获取所有数据(本身数据也不多)
理论上这个data 里应该是存放所有数据,还是只有当前页码的呢?
我两个都试过了,所有数据的代码如上图,当前页码的我在前端写了一个过滤,都没有效果,比如我只return了10个数据,但是页面会显示10+N个,多余的就是之前曾经显示过的数据。
或者说有什么属性是保证数据唯一性的吗,我可能设置错了?

pageSize 也不要返回,试试postData 看看,是最终的数据

pageSize 也不要返回,试试postData 看看,是最终的数据

    postData = {(data) =>{
        console.log(data)
        return data.slice( (_current - 1) * _pagesize,_current * _pagesize)
    }}

加了一个这样的,还是不行,我感觉核心就是在于之前刷到页面里的数据,再次翻页他不会刷新掉,导致了数据越来越多
有一个佐证就是如果我返回一样的数据他就不会产生数据数量错误了

我找到原因了 rowkey 设置错误,F12一下还是挺明显的

来个可重现的例子吧,这个问题还是第一次。

Was this page helpful?
0 / 5 - 0 ratings

Related issues

yadongxie150 picture yadongxie150  ·  3Comments

lvzheng0404 picture lvzheng0404  ·  3Comments

2uncle-code picture 2uncle-code  ·  3Comments

suifan picture suifan  ·  3Comments

Jerry-goodboy picture Jerry-goodboy  ·  3Comments