问题描述
我正在尝试改善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调用,我试图使其保持整洁,因此我正在寻找另一种解决方案-保持对路由的每次调用,
感谢您的帮助!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)