为什么我在 React 中的组件被多次调用？

Question

我遇到了一个问题，我的列表组件运行了两次，我只希望它运行一次。 我尝试在下面添加一个计数器，它只会运行从后端抓取数据的代码一次，但它不起作用，正如您在下面看到的那样，它仍然循环通过“grabListings”函数两次。 我还尝试了一个while循环和相同的结果，我得到了两个结果而不是一个。

我相信我的问题与我在 LandingPage 上调用 Listings 组件的方式有关。

如何只运行一次grabListings 组件？

登陆页面

    import NavBar from '../componets/NavBar/NavBar.js'
    import Footer from '../componets/Footer/Footer'
    import Slide1 from '../pictures/slide-1.jpg'
    import Listings from '../componets/Listings'
    import '../css/LandingPage.css';
    
    const LandingPage = () => {
    
        return (
            <div className='wrapper'>
                <NavBar />
    
                <div className='top-img'>
                    <img src={Slide1} alt='E46 Slide Show Pic 1' />
                </div>
    
                <Listings />
    
                <Footer />
            </div>
    
        )
    }
    
    export default LandingPage

列表组件

   const Listings = () => {

    let cars = []
    let links = []
    let prices = []
    let pictures = []

    let counter = 0

    const grabListings = async () => {
        
        if (counter < 1) {
            try {
                // console.log("looped thorugh grab listing")
                await axios.get('http://localhost:5000/scrape').then(async (res) => {
                    console.log("looped thorugh grab listing");
                    console.log(res);
                    const carsData = await (await axios.get('http://localhost:5000/car')).data;
                    cars.push(carsData);

                    const linksData = await (await axios.get('http://localhost:5000/link')).data;
                    links.push(linksData);

                    const pricesData = await (await axios.get('http://localhost:5000/price')).data;
                    prices.push(pricesData);

                    const picturesData = await (await axios.get('http://localhost:5000/picture')).data;
                    pictures.push(picturesData);

                    counter++
                });
            } catch (err) {
                console.log(err);
                counter++
            };

        };

        console.log(cars);
        console.log(links);
        console.log(prices);
        console.log(pictures);
    };

    grabListings();



    

    return (
        <>
            <h1>{cars[0]}</h1>
        </>
    )
}

export default Listings

结果

Answer 1

因为 React 会在状态改变时重新渲染，如果你想停止重新渲染，把你的grabListings() useEffect()中：

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