React/TS组件在POST请求完成后如何刷新页面？（Backstage插件场景）

核心思路 #

要实现POST同步后重新执行初始GET请求刷新组件，需通过状态驱动触发数据重新获取：用一个状态变量作为刷新触发器，在POST请求成功后更新该变量，让绑定了该变量的useEffect重新执行GET请求逻辑。

具体修改方案 #

1. 新增状态变量控制刷新触发器，同时存储应用数据与错误信息
2. 抽离GET请求逻辑为独立函数，通过useEffect监听刷新触发器自动执行
3. 修正POST请求后的逻辑：不再直接返回组件，而是更新错误状态或触发刷新
4. 调整错误提示的渲染逻辑，通过状态控制显示

修改后的完整代码 #

import React, { useState, useEffect } from 'react';
import { useApi } from '@backstage/core-plugin-api';
import { useEntity } from '@backstage/plugin-catalog-react';
import { Button } from '@material-ui/core';
import { argoCDApiRef } from '../../api';
import Alert from '@material-ui/lab/Alert';

export const SyncFetchComponent = () => {
    const apiClient = useApi(argoCDApiRef);
    const { entity } = useEntity();
    const appName = entity.metadata.name;
    
    // 状态变量：刷新触发器、应用数据、错误信息
    const [refreshTrigger, setRefreshTrigger] = useState(0);
    const [appData, setAppData] = useState(null);
    const [syncError, setSyncError] = useState('');

    // 封装GET请求逻辑，获取Argo CD应用信息
    const fetchAppData = async () => {
        try {
            const data = await apiClient.getAppInfo(appName);
            setAppData(data);
            setSyncError('');
        } catch (err) {
            setSyncError('获取应用信息失败');
        }
    };

    // 监听刷新触发器变化，自动执行GET请求
    useEffect(() => {
        fetchAppData();
    }, [refreshTrigger]);

    // 处理同步请求的回调函数
    async function handleSync() {
        setSyncError('');
        try {
            const response = await apiClient.updateSyncStatus(appName);
            if (response.status === 200) {
                // 同步成功后更新触发器，触发组件数据刷新
                setRefreshTrigger(prev => prev + 1);
            } else {
                setSyncError('同步请求失败');
            }
        } catch (err) {
            setSyncError('同步过程发生异常');
        }
    };

    // 根据应用状态判断是否显示同步按钮
    const showSyncButton = appData?.status?.sync?.status === 'OutOfSync';

    return (
        <div>
            {syncError && <Alert severity='error'>{syncError}</Alert>}
            {showSyncButton && (
                <Button onClick={handleSync} variant="contained" color="primary">
                    Sync App
                </Button>
            )}
        </div>
    );
};

关键说明 #

• 刷新触发器：refreshTrigger是数字类型的状态，每次同步成功后让它自增，useEffect会因依赖变化重新执行fetchAppData，实现组件数据的自动刷新。
• 错误处理修正：原代码中在事件回调里直接返回<Alert>的方式不符合React组件逻辑，改为通过syncError状态控制错误提示的渲染。
• API方法修正：原代码中updataSyncStatus为拼写错误，修正为updateSyncStatus，确保API调用正常。
• 按钮显示逻辑：根据获取到的应用状态动态控制同步按钮的显示，贴合业务需求。

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