React useEffect使控制台重复输出

Question

我正在使用React HOOK创建组件和Antd组件库。我格式化表数据并使用antd提供的回调函数。但是，每次添加HTTP请求时，它将导致控制台多次输出。如果减少HTTP请求之一，它将减少控制台。输出。

这些重复的输出会影响性能吗？ 如何将其减少为仅一个输出？

import React, { Fragment, useState, useEffect } from 'react';
import { Table, Spin } from 'antd';
const { Column } = Table;

function Home() {
    const [productType, setProductType] = useState([]);

    const [list, setList] = useState([]);

    // this is first time http request
    useEffect(() => {
        let isOk = true;
        const getProductData = async () => {
            await http
                .get(API.VIP_productList)
                .then(response => {
                    if (isOk) {
                        setProductType(response.data.list);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        };
        getProductData();
        return () => {
            isOk = false;
        };
    }, []);

    // this is second time
    useEffect(() => {
        let isOK = true;
        const getData = async () => {
            await http
                .get(API.VIP_dayData, search)
                .then(response => {
                    if (isOK) {
                        setList(response.data.list);
                        setLoading(false);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        };
        getData();
        return function cleanup() {
            isOK = false;
        };
    }, [search]);

    let tableFooter = (currentPageData) => {

        console.log(currentPageData) // look this
        return (
            <Fragment>
            </Fragment>
        );
    };

    console.log('abc'); // The output will also be repeated here.

    return (
        <Fragment>
            <div className='body'>
                <div className='table'>
                    <Spin spinning={loading}>
                        <Table dataSource={list} rowKey='vipName' footer={tableFooter} bordered pagination={false} scroll={{ x: 'max-content', y: 500 }}>
                            <Column title='vipName' dataIndex='vipName' key='vipName' fixed={'left'} width={90} />
                        </Table>
                    </Spin>
                </div>
            </div>
        </Fragment>
    );
}

export default Home;