Tencent / tdesign-react

A React UI components lib for TDesign.
https://tdesign.tencent.com/react
MIT License
795 stars 309 forks source link

[Table] pagination 使用三元符并且data为空时,页面会展示之前数据的前十条数据 #2957

Closed jacksonjin closed 1 week ago

jacksonjin commented 2 weeks ago

tdesign-react 版本

1.7.5

重现链接

https://codesandbox.io/p/sandbox/tdesign-react-demo-forked-r8ptn6?file=%2Fsrc%2Fdemo.jsx%3A1%2C1-38%2C1

重现步骤

重现代码关键是, pagination 是否是三元判断,如果pagination = {total,defaultPageSize, defaultCurrent},就不会出现问题 import React, { useState, useEffect } from "react"; import { Table } from "tdesign-react";

export default function EditableCellTable() { const arr = Array.from({ length: 100 }, (_, index) => ({ id: index + 1 }));

const [data, setData] = useState(arr);

useEffect(() => { setTimeout(() => { setData([]); }, 5000); }, []); const columns = [ { title: "id", colKey: "id", }, ]; // 当前示例包含:输入框、单选、多选、日期 等场景 return ( <Table rowKey="key" columns={columns} data={data} pagination={ data?.length ? { defaultPageSize: 10, defaultCurrent: 1, total: data?.length, } : null } /> ); }

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

### Tasks
github-actions[bot] commented 2 weeks ago

👋 @jacksonjin,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

NWYLZW commented 2 weeks ago
image

sandbox 无法访问(补充 sandbox 后可以重新打开 issue)

看贴出来的代码应该是是按照逻辑预期工作的

jacksonjin commented 2 weeks ago

图像 sandbox 无法访问(补充 sandbox 后可以重新打开的问题) 看贴士代码应该是按照逻辑预期工作的

现有逻辑是有问题的呀,sandbox 的内容是 贴出来的代码,执行一下下就知道了!

HaixingOoO commented 2 weeks ago

图像 sandbox 无法访问(补充 sandbox 后可以重新打开的问题) 看贴士代码应该是按照逻辑预期工作的

现有逻辑是有问题的呀,sandbox 的内容是 贴出来的代码,执行一下下就知道了!

现在是sandbox你给的链接是不是你自己打开可以看,我们打开看不了代码,也就是你设置了私有,没公开仓库,我们访问不了

jacksonjin commented 2 weeks ago

import React, { useState, useEffect } from "react"; import { Table } from "tdesign-react";

export default function EditableCellTable() { const arr = Array.from({ length: 100 }, (_, index) => ({ id: index + 1 }));

const [data, setData] = useState(arr);

useEffect(() => { setTimeout(() => { setData([]); }, 5000); }, []); const columns = [ { title: "id", colKey: "id", }, ]; // 当前示例包含:输入框、单选、多选、日期 等场景 return ( <Table rowKey="key" columns={columns} data={data} pagination={ data?.length ? { defaultPageSize: 10, defaultCurrent: 1, total: data?.length, } : null } /> ); }

import React, { useState, useEffect } from "react"; import { Table } from "tdesign-react";

export default function EditableCellTable() { const arr = Array.from({ length: 100 }, (_, index) => ({ id: index + 1 }));

const [data, setData] = useState(arr);

useEffect(() => { setTimeout(() => { setData([]); }, 5000); }, []); const columns = [ { title: "id", colKey: "id", }, ]; // 当前示例包含:输入框、单选、多选、日期 等场景 return ( <Table rowKey="key" columns={columns} data={data} pagination={ data?.length ? { defaultPageSize: 10, defaultCurrent: 1, total: data?.length, } : null } /> ); } 这个是 sandbox 里边的内容 随便在tdesign的一个官网上打开一个 sandbox ,执行上边的代码就能复现 image