Блог

Я новичок в react и часами пытался отладить и решить эту проблему без каких-либо результатов.

Я использую таблицы проектирования Ant, которые содержат API «нижнего колонтитула», который возвращает все значения после фильтрации данных. Затем эти значения передаются функции (handledFilteredObj), которая затем отправляет переданные значения (currentPageData) во временный объект. Затем этот временный объект устанавливается в переменную состояния csvData с помощью метода setter.

Однако, когда я использую упомянутый код, мое приложение выдает эту ошибку:

Ошибка: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.

Вот мой код:

 import "antd/dist/antd.css";

import { Space, Table } from "antd"
import { useEffect, useState } from "react";
import { CSVLink, CSVDownload } from "react-csv";
import styles from "../HeaderComponent/DashBoardComponent/Dashboard.module.css";

const TransactionTableComponent = (props) => {

    let f_obj = [];

    const [filteredInfo, setFilteredInfo] = useState(null)
    const [csvData, setCsvData] = useState("nothing")
    const csvDataRef = useRef();

    useEffect(() => {
        setFilteredInfo({});
    }, [])

    useEffect(() => {
    }, [filteredInfo])

    useEffect(() => {
    }, [csvData])

    const handleChange = (pagination, filters) => {
        setFilteredInfo(filters);
    }

    const handledFilteredObj = (currentPageData) => {
        f_obj = [];
        if (currentPageData.length > 0) {
            currentPageData.forEach(element => {
                debugger
                console.log(element)
                f_obj.push(element)
            })
        }
        setCsvData(f_obj)
        return null
    }

    const transactionTableColumns = [
        {
            title: 'Transaction ID',
            dataIndex: 'TransactionId',
            key: 'TransactionId',
            width: 150,
            sorter: (a, b) => a.TransactionId - b.TransactionId,

        },
        {
            title: 'Transaction Amount',
            dataIndex: 'TransactionAmount',
            key: 'TransactionAmount',
            width: 150,
            sorter: (a, b) => a.TransactionAmount - b.TransactionAmount,
            ellipsis: true,
        },
        {
            title: 'Date',
            dataIndex: 'TransactionDate',
            key: 'TransactionDate',
            width: 150,
        },
        {
            title: "TransactionType",
            dataIndex: "TransactionType",
            key: "TransactionType",
            filters: [
                { text: "Deposit", value: "DEPOSIT" },
                { text: "Withdrawl", value: "WITHDRAWL" },
                { text: "Bill Payment", value: "BILLPAYMENT" }
            ],
            onFilter: (value, record) => record.TransactionType.includes(value)
        },
        {
            title: 'Transaction Time',
            dataIndex: 'TransactionTime',
            width: 150,
            key: 'TransactionTime',
            sorter: (a, b) => a.TransactionTime < b.TransactionTime,
        },
        {
            title: 'CNIC',
            dataIndex: 'RiderCNIC',
            width: 150,
            key: 'RiderCNIC',
        }
    ];

    return (
        <Space direction='vertical'>
            <Table
                className={styles.RiderTable}
                columns={transactionTableColumns}
                dataSource={props.transactionTableData}
                size={'middle'}
                scroll={{ y: 240 }}
                onChange={handleChange}
                footer={(currentPageData) =>
                    handledFilteredObj(currentPageData)
                }
            />

            <CSVLink data={csvData} className="btn btn-primary">
                Extract Data
            </CSVLink>
        </Space>
    )
}

export default TransactionTableComponent


 

Вот что я пробовал. Пожалуйста, обратите внимание, что код сокращен для краткости.

Передал событие в метод handledFilteredObj() вместе с данными, чтобы остановить распространение с помощью event.stopPropagation, но он всегда находил событие неопределенным.

 const handledFilteredObj = (event, currentPageData) => {
        f_obj = [];
        if (currentPageData.length > 0) {
            currentPageData.forEach(element => {
                debugger
                console.log(element)
                f_obj.push(element)
            })
        }
        setCsvData(f_obj)
        event.stopPropagation()
        return null
    }

//inside jsx
//...more code
<Table
                className={styles.RiderTable}
                columns={transactionTableColumns}
                dataSource={props.transactionTableData}
                size={'middle'}
                scroll={{ y: 240 }}
                onChange={handleChange}
                footer={(currentPageData, event) =>
                    handledFilteredObj(currentPageData, event)
                }
            />
 

Использование переменной области видимости с использованием ключевого слова let, но данные этой переменной никогда не менялись, хотя они менялись внутри функции, когда я ее утешал.

 //declaring the data variable:
let data = [];

const handledFilteredObj = (currentPageData) => {
        f_obj = [];
        if (currentPageData.length > 0) {
            currentPageData.forEach(element => {
                debugger
                console.log(element)
                f_obj.push(element)
            })
        }
        data = f_obj   //.....set data var to f_obj
        return null
    }

            <CSVLink data={data} className="btn btn-primary">
                Extract Data
            </CSVLink>