react ant table表格切換分頁獲取全部選中數據

問題: ant 切換頁碼時,onChange打印selectedRows是能獲取當前頁的數據,無法獲取上一頁選中的數據

解決:通過二維數組於頁碼的組合再轉一維數組展示實現

import React, { Component } from 'react';
import { Table, Divider, Modal, message,Button } from 'antd';
import EditForm from '../../components/EditForm';
const { confirm } = Modal;
class TableEdit extends Component {
    state = {
    tableData: [],
    doubleArr: [], // 存放雙數組的數組
    filterRows: [], // 存放拼接后的一維數組的變量
        pagination: {
            pageSize: 10,
            current: 1
        },
        loading: false,
        selectedRowKeys: [],
        selectedRows:[],
        columns: [
            {
                title: 'Name',
                dataIndex: 'name'
            },
            {
                title: 'Age',
                dataIndex: 'age'
            },
            {
                title: 'Address',
                dataIndex: 'address'
            },
            {
                title: 'Email',
                dataIndex: 'email'
            },
            {
                title: 'Action',
                dataIndex: 'Action',
                width: 200,
                align: 'center',
                render: (text, row, index) => (
                    <span>
                        <button className="link-button" onClick={() => this.handleEdit(row)}>
                            編輯
                        </button>
                        <Divider type="vertical" />
                        <button className="link-button" onClick={() => this.handleDel(row)}>
                            刪除
                        </button>
                    </span>
                )
            }
        ],
        currentRow: null
    };

    componentWillMount() {
        const { pageSize, current } = this.state.pagination;
        this.fetch(current, pageSize);
    }

    componentWillUnmount() {
        // componentWillMount進行異步操作時且在callback中進行了setState操作時，需要在組件卸載時清除state
        this.setState = () => {
            return;
        };
    }
    // 分頁操作
    handleTableChange = (pagination) => {
        const pager = { ...this.state.pagination };
        pager.current = pagination.current;
        this.setState({ pagination: pager }, () => {
            this.fetch(pager.current, this.state.pagination.pageSize);
        });
    };
    fetch = (pageCurrent, pageSize) => {
        this.setState({ loading: true });
        setTimeout(() => {
            const pager = { ...this.state.pagination };
            pager.total = 100;
            const tableData = [];
            for (let i = (pageCurrent - 1) * pageSize; i < pageSize * pageCurrent; i++) {
                tableData.push({
                    key: i,
                    name: `Edward King ${i}`,
                    age: 32,
                    email: '[e-mail]',
                    address: `London, Park Lane no. ${i}`
                });
            }
            this.setState({
                loading: false,
                tableData,
                pagination: pager
            });
        }, 1000);
    };
      // 扁平化二維數組的方法
        mapRows = params => {
            var res = [];
            for (var i = 0; i < params.length; i++) {
                if (Array.isArray(params[i])) {
                    res = res.concat(this.mapRows(params[i]));
                } else {
                    res.push(params[i]);
                }
            }
            return res.filter(Boolean); //去掉undefined的情況
        };
    onSelectedRowChange = (selectedRowKeys, selectedRows) => {
    const { doubleArr, pagination } = this.state
        // 勾選生成二維數組
        doubleArr[pagination.current ? pagination.current - 1 : 0] = selectedRows
        // 這塊扁平化成為一位數組
        const filterRows = this.mapRows(doubleArr);
        console.log(filterRows, "filterRows") // 這塊可以打印出來拼接的結果
        this.setState({
          selectedRowKeys: selectedRowKeys,
          selectedRows: filterRows // 存放拼接好的一維數組
        });
  };
    // 編輯
    handleEdit(row) {
        this.setState({ currentRow: row, visible: true });
    }
    // 刪除
    handleDel(row) {
        confirm({
            title: '溫馨提示',
            content: '確定要刪除當前內容嗎？',
            okText: '確定',
            cancelText: '取消',
            onOk() {
                message.info('你點擊了確定，當前行key為：' + row.key, 1);
            },
            onCancel() {}
        });
    }
    handleOk = () => {
        this.setState({ visible: false });
    };

    handleCancel = () => {
        this.setState({ visible: false });
    };
    // 提交
    handleSubmit = e => {
        e.preventDefault();
        let _this = this;
        this.formRef.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                this.setState({ visible: false });
                // 此處應該為后台業務邏輯
                setTimeout(() => {
                    Modal.info({
                        title: '點擊了提交',
                        content: (
                            <div>
                                <p>當前表單內容為：</p>
                                <p>{JSON.stringify(values)}</p>
                            </div>
                        ),
                        onOk() {
                            // 操作完跳轉到第一頁
                            const pager = { ..._this.state.pagination };
                            pager.current = 1;
                            _this.setState({ pagination: pager });
                            _this.fetch(1, _this.state.pagination.pageSize);
                            // console.log(_this.state.selectedRowKeys)
                        }
                    });
                }, 500);
            }
        });
    };
    getAllSel=()=>{
        console.log(this.state.selectedRowKeys,this.state.selectedRows)
    }
    render() {
        const { selectedRowKeys, loading, pagination, columns, tableData } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectedRowChange
        };
        return (
            <div className="shadow-radius">
            <Button onClick={this.getAllSel}>獲取選中數據</Button> <br/>
            <br/>
                <Table
                    bordered
                    columns={columns}
                    dataSource={tableData} // list數據
                    loading={loading}
                    onChange={this.handleTableChange}
                    pagination={pagination}
                    rowSelection={rowSelection}
                />
                <Modal title="編輯信息" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} footer={null}>
                    <EditForm data={this.state.currentRow} visible={this.state.visible} wrappedComponentRef={form => (this.formRef = form)} handleSubmit={this.handleSubmit} />
                </Modal>
            </div>
        );
    }
}

export default TableEdit;