在react hook中使用useEffect请求数据时，每增加一次http请求，控制台将增加一次打印

Question

问题描述

在react hook中使用useEffect请求数据时，每增加一次http请求，控制台将增加一次打印

问题出现的环境背景及自己尝试过哪些方法

尝试过将代码移动到组件函数之外，但是依然重复打印

相关代码

import React, { Fragment, useState, useEffect, useCallback } from 'react';
import http from '../BASE/http';
import API from '../BASE/api';
import { Table, Spin } from 'antd';
const { Column } = Table;

function Home() {
    const [productType, setProductType] = useState([]);
    const [search, setSearch] = useState({
        date: '2019-07-14',
        timeType: 0,
        productId: 0,
        pageNo: 1,
        pageSize: 10000
    });
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(true);

    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;
        };
    }, []);

    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]);
    
    // 单独这样写也会重复打印
    console.log('abc');

    const tableFooter = useCallback((currentPageData) => {
        // 这里会多次打印，具体次数根据useEffect中的HTTP请求次数增加
        console.log(currentPageData); 
        return (
            <Fragment>
            </Fragment>
        );
    }, []);

    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;

你期待的结果是什么？实际看到的错误信息又是什么？

这是控制台的实际输出，这种重复对程序是否有影响，如何将其减少到只有一次

Answer 1

你每次http请求 都会改变loading与list 就会导致Table组建的渲染与更新
Table状态改变就会触发footer的更新
想减少的话你可以把foot放到外层组件来

Answer 2

打印说明组件在重新渲染