[Table] 非受控模式，同时传入 showSizeChanger 和 pageSize，table 分页异常 #1885

DaiQiangReal · 2023-10-31T06:22:51Z

Is there an existing issue for this?

I have searched the existing issues

Which Component

No response

Semi Version

latest

Current Behavior

切换为 10 条每页之后，点击第 4 页会跳转到第 1 页。
不使用table，单独使用 pagination 可以同时传入 showSizeChanger 和 pageSize，pageSize 的值作为 sizeChanger 的默认值。但在 table 中这样使用会出现问题。

20231031-141959.mp4

Expected Behavior

No response

Steps To Reproduce

No response

ReproducibleCode

import React, { useState, useMemo } from 'react';
import { Table, Avatar } from '@douyinfe/semi-ui';
import * as dateFns from 'date-fns';
const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
const columns = [
    {
        title: '标题',
        dataIndex: 'name',
        width: 400,
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
                    {text}
                </div>
            );
        },
        filters: [
            {
                text: 'Semi Design 设计稿',
                value: 'Semi Design 设计稿',
            },
            {
                text: 'Semi D2C 设计稿',
                value: 'Semi D2C 设计稿',
            },
        ],
        onFilter: (value, record) => record.name.includes(value),
    },
    {
        title: '大小',
        dataIndex: 'size',
        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
        render: text => `${text} KB`,
    },
    {
        title: '所有者',
        dataIndex: 'owner',
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
                        {typeof text === 'string' && text.slice(0, 1)}
                    </Avatar>
                    {text}
                </div>
            );
        },
    },
    {
        title: '更新日期',
        dataIndex: 'updateTime',
        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
        render: value => {
            return dateFns.format(new Date(value), 'yyyy-MM-dd');
        },
    },
];
const DAY = 24 * 60 * 60 * 1000;
function App() {
    const [dataSource, setData] = useState([]);
    const [pagination, setPagination] = useState({
        pageSize: 20,
        showSizeChanger: true
    })
    const [update, setUpdate] = useState(0)
    const rowSelection = useMemo(
        () => ({
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Michael James', // Column configuration not to be checked
                name: record.name,
            }),
        }),
        []
    );
    const scroll = useMemo(() => ({ y: 300 }), []);
    const getData = () => {
        const data = [];
        for (let i = 0; i < 46; i++) {
            const isSemiDesign = i % 2 === 0;
            const randomNumber = (i * 1000) % 199;
            data.push({
                key: '' + i,
                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi D2C 设计稿${i}.fig`,
                owner: isSemiDesign ? '姜鹏志' : '郝宣',
                size: randomNumber,
                updateTime: new Date().valueOf() + randomNumber * DAY,
                avatarBg: isSemiDesign ? 'grey' : 'red',
            });
        }
        return data;
    };
    useEffect(() => {
        const data = getData();
        setData(data);
    }, []);
    return (<div>
        {update}
        <Table columns={columns} dataSource={dataSource} pagination={pagination} rowSelection={rowSelection} onChange={() => {
            console.log('change')
            setTimeout(() => {
                setUpdate(p => p + 1)
            })
        }} />
    </div>)
}
render(App);

Environment

- OS:
- browser:

Anything else?

No response

pointhalo · 2023-10-31T06:23:48Z

pagination 更新了就是会重置。这个是写法问题吧。如果不想重置，应该保持同一个引用

chhpt · 2023-10-31T06:45:41Z

@pointhalo 这里不是写法的问题，把 pagination 改成 ref 引用还是会有同样的问题

import React, { useRef, useState, useMemo } from 'react';
import { Table, Avatar } from '@douyinfe/semi-ui';
import * as dateFns from 'date-fns';

const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
const columns = [
    {
        title: '标题',
        dataIndex: 'name',
        width: 400,
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
                    {text}
                </div>
            );
        },
        filters: [
            {
                text: 'Semi Design 设计稿',
                value: 'Semi Design 设计稿',
            },
            {
                text: 'Semi D2C 设计稿',
                value: 'Semi D2C 设计稿',
            },
        ],
        onFilter: (value, record) => record.name.includes(value),
    },
    {
        title: '大小',
        dataIndex: 'size',
        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
        render: text => `${text} KB`,
    },
    {
        title: '所有者',
        dataIndex: 'owner',
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
                        {typeof text === 'string' && text.slice(0, 1)}
                    </Avatar>
                    {text}
                </div>
            );
        },
    },
    {
        title: '更新日期',
        dataIndex: 'updateTime',
        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
        render: value => {
            return dateFns.format(new Date(value), 'yyyy-MM-dd');
        },
    },
];

const DAY = 24 * 60 * 60 * 1000;

function App() {
    const [dataSource, setData] = useState([]);
    const [pagination, setPagination] = useState({
        pageSize: 20,
        showSizeChanger: true
    });
    const memoPagination = useRef({
        pageSize: 20,
        showSizeChanger: true
    });
    const [update, setUpdate] = useState(0)

    const rowSelection = useMemo(
        () => ({
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Michael James', // Column configuration not to be checked
                name: record.name,
            }),
        }),
        []
    );
    const scroll = useMemo(() => ({ y: 300 }), []);

    const getData = () => {
        const data = [];
        for (let i = 0; i < 46; i++) {
            const isSemiDesign = i % 2 === 0;
            const randomNumber = (i * 1000) % 199;
            data.push({
                key: '' + i,
                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi D2C 设计稿${i}.fig`,
                owner: isSemiDesign ? '姜鹏志' : '郝宣',
                size: randomNumber,
                updateTime: new Date().valueOf() + randomNumber * DAY,
                avatarBg: isSemiDesign ? 'grey' : 'red',
            });
        }
        return data;
    };

    useEffect(() => {
        const data = getData();
        setData(data);
    }, []);

    return (<div>
        {update}
        <Table columns={columns} dataSource={dataSource} pagination={memoPagination.current} rowSelection={rowSelection} onChange={() => {
            console.log('change')
            setTimeout(() => {
                setUpdate(p => p + 1)
            })
        }} />
    </div>)
}

render(App);

pointhalo · 2023-10-31T06:49:06Z

pagination 更新了就是会重置。这个是写法问题吧。如果不想重置，应该保持同一个引用

忽略这条评论。信息没看全。

pointhalo · 2023-10-31T06:49:59Z

@pointhalo 这里不是写法的问题，把 pagination 改成 ref 引用还是会有同样的问题

import React, { useRef, useState, useMemo } from 'react';
import { Table, Avatar } from '@douyinfe/semi-ui';
import * as dateFns from 'date-fns';

const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
const columns = [
    {
        title: '标题',
        dataIndex: 'name',
        width: 400,
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
                    {text}
                </div>
            );
        },
        filters: [
            {
                text: 'Semi Design 设计稿',
                value: 'Semi Design 设计稿',
            },
            {
                text: 'Semi D2C 设计稿',
                value: 'Semi D2C 设计稿',
            },
        ],
        onFilter: (value, record) => record.name.includes(value),
    },
    {
        title: '大小',
        dataIndex: 'size',
        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
        render: text => `${text} KB`,
    },
    {
        title: '所有者',
        dataIndex: 'owner',
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
                        {typeof text === 'string' && text.slice(0, 1)}
                    </Avatar>
                    {text}
                </div>
            );
        },
    },
    {
        title: '更新日期',
        dataIndex: 'updateTime',
        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
        render: value => {
            return dateFns.format(new Date(value), 'yyyy-MM-dd');
        },
    },
];

const DAY = 24 * 60 * 60 * 1000;

function App() {
    const [dataSource, setData] = useState([]);
    const [pagination, setPagination] = useState({
        pageSize: 20,
        showSizeChanger: true
    });
    const memoPagination = useRef({
        pageSize: 20,
        showSizeChanger: true
    });
    const [update, setUpdate] = useState(0)

    const rowSelection = useMemo(
        () => ({
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Michael James', // Column configuration not to be checked
                name: record.name,
            }),
        }),
        []
    );
    const scroll = useMemo(() => ({ y: 300 }), []);

    const getData = () => {
        const data = [];
        for (let i = 0; i < 46; i++) {
            const isSemiDesign = i % 2 === 0;
            const randomNumber = (i * 1000) % 199;
            data.push({
                key: '' + i,
                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi D2C 设计稿${i}.fig`,
                owner: isSemiDesign ? '姜鹏志' : '郝宣',
                size: randomNumber,
                updateTime: new Date().valueOf() + randomNumber * DAY,
                avatarBg: isSemiDesign ? 'grey' : 'red',
            });
        }
        return data;
    };

    useEffect(() => {
        const data = getData();
        setData(data);
    }, []);

    return (<div>
        {update}
        <Table columns={columns} dataSource={dataSource} pagination={memoPagination.current} rowSelection={rowSelection} onChange={() => {
            console.log('change')
            setTimeout(() => {
                setUpdate(p => p + 1)
            })
        }} />
    </div>)
}

render(App);

get, @shijiatongxue cc

shijiatongxue · 2023-10-31T09:43:14Z

@pointhalo 这里不是写法的问题，把 pagination 改成 ref 引用还是会有同样的问题

import React, { useRef, useState, useMemo } from 'react';
import { Table, Avatar } from '@douyinfe/semi-ui';
import * as dateFns from 'date-fns';

const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
const columns = [
    {
        title: '标题',
        dataIndex: 'name',
        width: 400,
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
                    {text}
                </div>
            );
        },
        filters: [
            {
                text: 'Semi Design 设计稿',
                value: 'Semi Design 设计稿',
            },
            {
                text: 'Semi D2C 设计稿',
                value: 'Semi D2C 设计稿',
            },
        ],
        onFilter: (value, record) => record.name.includes(value),
    },
    {
        title: '大小',
        dataIndex: 'size',
        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
        render: text => `${text} KB`,
    },
    {
        title: '所有者',
        dataIndex: 'owner',
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
                        {typeof text === 'string' && text.slice(0, 1)}
                    </Avatar>
                    {text}
                </div>
            );
        },
    },
    {
        title: '更新日期',
        dataIndex: 'updateTime',
        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
        render: value => {
            return dateFns.format(new Date(value), 'yyyy-MM-dd');
        },
    },
];

const DAY = 24 * 60 * 60 * 1000;

function App() {
    const [dataSource, setData] = useState([]);
    const [pagination, setPagination] = useState({
        pageSize: 20,
        showSizeChanger: true
    });
    const memoPagination = useRef({
        pageSize: 20,
        showSizeChanger: true
    });
    const [update, setUpdate] = useState(0)

    const rowSelection = useMemo(
        () => ({
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Michael James', // Column configuration not to be checked
                name: record.name,
            }),
        }),
        []
    );
    const scroll = useMemo(() => ({ y: 300 }), []);

    const getData = () => {
        const data = [];
        for (let i = 0; i < 46; i++) {
            const isSemiDesign = i % 2 === 0;
            const randomNumber = (i * 1000) % 199;
            data.push({
                key: '' + i,
                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi D2C 设计稿${i}.fig`,
                owner: isSemiDesign ? '姜鹏志' : '郝宣',
                size: randomNumber,
                updateTime: new Date().valueOf() + randomNumber * DAY,
                avatarBg: isSemiDesign ? 'grey' : 'red',
            });
        }
        return data;
    };

    useEffect(() => {
        const data = getData();
        setData(data);
    }, []);

    return (<div>
        {update}
        <Table columns={columns} dataSource={dataSource} pagination={memoPagination.current} rowSelection={rowSelection} onChange={() => {
            console.log('change')
            setTimeout(() => {
                setUpdate(p => p + 1)
            })
        }} />
    </div>)
}

render(App);

get, @shijiatongxue cc

确实有这个现象，从 0.x 开始就是这样。初步评估不合理，需要再看下。

shijiatongxue · 2023-10-31T12:08:36Z

最小复现代码。

import React, { useRef, useState, useMemo } from 'react';
import { Table, Avatar } from '@douyinfe/semi-ui';
import * as dateFns from 'date-fns';

const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
const columns = [
    {
        title: '标题',
        dataIndex: 'name',
        width: 400,
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar>
                    {text}
                </div>
            );
        },
        filters: [
            {
                text: 'Semi Design 设计稿',
                value: 'Semi Design 设计稿',
            },
            {
                text: 'Semi D2C 设计稿',
                value: 'Semi D2C 设计稿',
            },
        ],
        onFilter: (value, record) => record.name.includes(value),
    },
    {
        title: '大小',
        dataIndex: 'size',
        sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
        render: text => `${text} KB`,
    },
    {
        title: '所有者',
        dataIndex: 'owner',
        render: (text, record, index) => {
            return (
                <div>
                    <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
                        {typeof text === 'string' && text.slice(0, 1)}
                    </Avatar>
                    {text}
                </div>
            );
        },
    },
    {
        title: '更新日期',
        dataIndex: 'updateTime',
        sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1),
        render: value => {
            return dateFns.format(new Date(value), 'yyyy-MM-dd');
        },
    },
];

const DAY = 24 * 60 * 60 * 1000;

function App() {
    const [dataSource, setData] = useState([]);
    const [pagination, setPagination] = useState({
        pageSize: 20,
        showSizeChanger: true
    });

    const getData = () => {
        const data = [];
        for (let i = 0; i < 46; i++) {
            const isSemiDesign = i % 2 === 0;
            const randomNumber = (i * 1000) % 199;
            data.push({
                key: '' + i,
                name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi D2C 设计稿${i}.fig`,
                owner: isSemiDesign ? '姜鹏志' : '郝宣',
                size: randomNumber,
                updateTime: new Date().valueOf() + randomNumber * DAY,
                avatarBg: isSemiDesign ? 'grey' : 'red',
            });
        }
        return data;
    };

    useEffect(() => {
        const data = getData();
        setData(data);
    }, []);

    return (<div>
        <Table columns={columns} dataSource={dataSource} pagination={pagination} />
    </div>)
}

render(App);

#1885

shijiatongxue · 2023-10-31T12:57:28Z

fix later

#1885

#1885 (#1888) Co-authored-by: shijia.me <shijia.me@bytedance.com> Co-authored-by: pointhalo <88709023+pointhalo@users.noreply.github.com>

pointhalo · 2023-11-27T13:20:00Z

fix v 2.47.0

shijiatongxue pushed a commit that referenced this issue Oct 31, 2023

fix: fixed Table pagination bug when given pageSize and showSizeChanger

10deec6

#1885

shijiatongxue mentioned this issue Oct 31, 2023

fix: fixed Table pagination bug when given pageSize and showSizeChang… #1888

Merged

6 tasks

shijiatongxue pushed a commit that referenced this issue Nov 10, 2023

fix: fixed Table pagination bug when given pageSize and showSizeChanger

2194d02

#1885

pointhalo closed this as completed in #1888 Nov 17, 2023

pointhalo added a commit that referenced this issue Nov 17, 2023

fix: fixed Table pagination bug when given pageSize and showSizeChanger

bedfb97

#1885 (#1888) Co-authored-by: shijia.me <shijia.me@bytedance.com> Co-authored-by: pointhalo <88709023+pointhalo@users.noreply.github.com>

DaiQiangReal pushed a commit that referenced this issue Nov 27, 2023

fix: fixed Table pagination bug when given pageSize and showSizeChanger

eaaf94e

#1885 (#1888) Co-authored-by: shijia.me <shijia.me@bytedance.com> Co-authored-by: pointhalo <88709023+pointhalo@users.noreply.github.com>

DaiQiangReal pushed a commit that referenced this issue Nov 27, 2023

fix: fixed Table pagination bug when given pageSize and showSizeChanger

cf18c4d

#1885 (#1888) Co-authored-by: shijia.me <shijia.me@bytedance.com> Co-authored-by: pointhalo <88709023+pointhalo@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Table] 非受控模式，同时传入 showSizeChanger 和 pageSize，table 分页异常 #1885

[Table] 非受控模式，同时传入 showSizeChanger 和 pageSize，table 分页异常 #1885

DaiQiangReal commented Oct 31, 2023

pointhalo commented Oct 31, 2023 •

edited

chhpt commented Oct 31, 2023

pointhalo commented Oct 31, 2023

pointhalo commented Oct 31, 2023

shijiatongxue commented Oct 31, 2023

shijiatongxue commented Oct 31, 2023

shijiatongxue commented Oct 31, 2023

pointhalo commented Nov 27, 2023

[Table] 非受控模式，同时传入 showSizeChanger 和 pageSize，table 分页异常 #1885

[Table] 非受控模式，同时传入 showSizeChanger 和 pageSize，table 分页异常 #1885

Comments

DaiQiangReal commented Oct 31, 2023

Is there an existing issue for this?

Which Component

Semi Version

Current Behavior

Expected Behavior

Steps To Reproduce

ReproducibleCode

Environment

Anything else?

pointhalo commented Oct 31, 2023 • edited

chhpt commented Oct 31, 2023

pointhalo commented Oct 31, 2023

pointhalo commented Oct 31, 2023

shijiatongxue commented Oct 31, 2023

shijiatongxue commented Oct 31, 2023

shijiatongxue commented Oct 31, 2023

pointhalo commented Nov 27, 2023

pointhalo commented Oct 31, 2023 •

edited