如何实现React应用每2秒从后端自动刷新数据

核心修改逻辑 #

• 保留组件首次挂载时的立即拉取逻辑
• 新增2000ms间隔的定时器周期性触发数据拉取
• 添加定时器清理逻辑，避免组件卸载后出现内存泄漏

修改后完整代码 #

import React, {useState, useEffect} from 'react';
import {Route, Switch, useLocation} from 'react-router-dom';
import Home from './Home';

function App() {
    const location = useLocation();
    console.log(location);
    const [feedbacks, setFeedbacks] = useState([]);

    useEffect(() => {
        const fetchArticles = async () => {
            setFeedbacks([]);
            try {
                const url = 'https://url.abc.com/';
                const api_response = await fetch(url);
                let data = await api_response.json();
                setFeedbacks(data);
            } catch (e) {
                // 可自行扩展请求失败的后续处理
                console.error('数据请求异常:', e);
            }
        }
        // 首次挂载立即拉取数据
        fetchArticles();
        // 启动2秒定时刷新任务
        const refreshTimer = setInterval(fetchArticles, 2000);
        // 组件卸载时清除定时器
        return () => clearInterval(refreshTimer);
    }, [])

    const data = {feedbacks};

    return (
        <div className="App">
            <Switch>
                <Route path="/" render={() => <Home data={data}/>} exact/>
                <Route path="/:username" render={() => <Home data={data}/>} exact/>
            </Switch>
        </div>
    );
}

export default App;

可选扩展 #

如果后续需要支持手动控制刷新的启停，可额外声明一个状态变量控制定时器的创建与销毁即可。

内容的提问来源于stack exchange，提问作者ThinkGeek