我有一个呈现酒店信息列表组件：

import {useEffect, useState} from "react";
import {onSnapshot} from "firebase/firestore"
import {hotelCollection} from "../controller/controller";
import {HotelType} from "../types/hotel";
import Information from "../components/Information";

function Card() {

    const [isLoading, setIsLoading] = useState(false);
    const [hotels, setHotels] = useState<HotelType[]>([]);

    useEffect(() => onSnapshot(hotelCollection, (snapshot) => {
        setIsLoading(true);
        setHotels(
            snapshot.docs.map((doc) => {
                return {
                    id: doc.id,
                    ...doc.data(),
                }
            })
        )
        setIsLoading(false);
    }), []);

    if (isLoading) return <div className="loading"/>;
    return (
        <div className={"card"}>
            <h2 className="title">All hotels</h2>
            {hotels && hotels.length ? (
                <div>
                    {
                        hotels?.map((hotel) => (
                            <Information key= {hotel.id} hotel={hotel}/>
                        ))
                    }
                </div>
            ): (
                <h2 className="no-hotels">There isn't any hotel, please add one.</h2>
            )}
        </div>
    )
}

export default Card;

一切正常，只是当我进入页面或通过路径访问页面时，它首先显示

<h2 className="no-hotels">There isn't any hotel, please add one.</h2>

然后呈现组件
我不知道为什么，有人能帮忙吗？