3

我正在尝试改进我的 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','2','3'])
        }, 1000);
    }, [])

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

export default Home;

但是实际上home.jsx是一个非常大的文件，其中包含其他几个函数和 API 调用，我正在努力保持它的整洁，所以我正在寻找另一种解决方案 - 让每次调用都保持在一个路由上，

谢谢你的帮助！

4

0 回答 0