使用useFetch钩子时重复渲染，控制台多次打印数据求助

你的console.log(data)写在组件顶层代码中，每次组件渲染都会执行这段打印逻辑。而组件会因为以下原因多次触发渲染：

• useFetch钩子的状态更新（比如isLoading从true切换为false、data从undefined变为实际接口响应数据）
• React开发环境严格模式下的双重渲染（用于检测潜在副作用）

要实现仅打印一次data响应，你可以通过useEffect监听data的变化，仅当data有效时执行打印：

修改你的SelectTableComponent代码：

import { useEffect } from 'react';

export default function SelectTableComponent() {
    const { data, isLoading, error } = useFetchCaseStudy();

    useEffect(() => {
        if (data) {
            console.log(data);
        }
    }, [data]); // 仅当data发生变化时执行回调

    return (
        <div className="container">
            {isLoading && <div>A moment please...</div>}
            {error && (
                <div>{`There is a problem fetching the get data - ${error}`}</div>
            )}
            {data && <DataGrid
                columns={columns}
                rows={data}
            />}
        </div>
    );
}

这样只有当data从undefined变为有效接口数据时，才会触发一次console.log，完全符合你的预期。

另外补充：如果是开发环境严格模式导致的额外渲染，生产环境中这种双重渲染会被自动移除，但使用useEffect的方式更通用，不受运行环境影响，能稳定保证仅打印一次有效数据。

内容的提问来源于stack exchange，提问作者Nicole Kozmanko