对链接悬停进行React Send API调用以预加载数据

如何解决对链接悬停进行React Send API调用以预加载数据

我正在尝试改善React应用程序的UI，我想尝试的一件事是当用户将鼠标悬停在链接上时如何预触发API调用，因此在点击它们时到此为止，数据已经加载，并且FakeAPI.jsx已经用来自API调用的数据填充了状态

目前，我有以下内容：

//Home.jsx

import {Link} from 'react-router-dom';

const Home = () => {
    return (
        <div className="links">
            //I would want to load the API call when a user hovers on the below link
            <Link to="/fakeApi">Fake Api</Link>
        </div>
    );
};

export default Home;

然后调用API

//FakeApi.jsx
import React,{ useState,useEffect } from 'react';

const FakeApi = () => {

const [data,setData] = useState([])

useEffect(()=>{
    setTimeout(() => {
        //simulates an api call to the backend
        setData(['1','2','3'])
    },250);
},[])



    return (
        <div>
            Fake Api call
            {data.map(entry=>(
                <div key={entry}>number is {entry}</div>
            ))}
        </div>
    );
};

export default FakeApi;

到目前为止，我唯一想出的解决方案是将api调用放在home.jsx中，然后在悬停时调用它，并将数据作为道具传递，

如下：

//Home.jsx
import React from 'react';
import {Link} from 'react-router-dom';
import LinkWithPreload from '../shared/LinkWithPreload';

const Home = () => {

    const [data,setData] = useState([])

    useEffect(()=>{
        setTimeout(() => {
            //simulates an api call to the backend
            setData(['1','3'])
        },1000);
    },[])

    return (
        <div className="links">
            <Link to="/fakeApi" props={data}>Fake Api</Link>
        </div>
    );
};

export default Home;

实际上，home.jsx是一个非常大的文件，其中包含其他几个函数和API调用，我试图使其保持整洁，因此我正在寻找另一种解决方案-保持对路由的每次调用，

感谢您的帮助！