我有一些React组件，当我渲染它们时，它们通过Axios执行相应的API访问并输出数据。
举个例子，我有一个显示比赛列表的组件。这样的请求有多正确？迟早，如果我进入比赛显示10次的页面，我会得到错误"429（太多请求）"...我该如何解决这个问题，我该如何在访问网站时呈现一次请求，然后缓存它，避免不必要的重复请求？
我的代码：

import React from 'react';
import {Link} from "react-router-dom";
import classes from "./listTour.module.css";
import {useEffect, useState} from "react";
import {URL} from '../../../URL'
import axios from "axios";

const ListTour = (props) => {

    const [cardTour, setCardTour] = useState([]);

    useEffect(() => {
        const getListTournaments = async () => {
            try {
                const tours = await axios.get(`${URL}/tournaments`)
                console.log(tours.data)
                setCardTour(tours.data)
            } catch (error) {
                console.log(error)
            }
        }
        getListTournaments()
    }, [])

    return (
        cardTour.map(tour => {
            return (
                <Link key={tour.id} to={`Profile/${tour.name_tour_sort}`}>
                    <div className={classes.cardTour}>
                        <div className={classes.cardTourAdaptive}>
                            <div className={classes.cardTourBanner}>
                                <img className={classes.cardTourBannerImg}
                                     src={`/images/LogoAndBannerTour/${tour.banner_tour}`} alt={`${tour.name_tour}`}/>
                            </div>
                            <div className={classes.nameTour}>{tour.name_tour}</div>
                            <div className={classes.prizePoolTour}>{tour.prize_pool}</div>
                            <span className={classes.DateTour}>{tour.date_tour}</span>
                        </div>
                    </div>
                </Link>
            )
        })
    );
};

export default ListTour;