如何在 POST 请求后刷新 React/TS 页面？

Question

我正在为 Backstage 开发一个插件，它通过 API 在 Argo CD 上执行检查。

1. GET 请求以收集有关应用程序的信息 https://argocd.acme.com/api/v1/applications/${app-name}

2. 如果 status.sync.status 是“OutOfSync”，我会呈现一个按钮，允许执行 POST 请求以更新状态 https://argocd.acme.com/api/v1/applications/${app -name}/sync。

3. （我需要帮助的是）：POST请求完成后，我想刷新整个组件页面（再次执行初始GET）

   ---

   这是我负责 POST 请求的组件的代码：

   import React 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();
       
       async function PostSyncStatus() {
           const response = await apiClient.updataSyncStatus(`${entity.metadata.name}`);
           
           if(response.status !== 200) {
               return <Alert severity='error'>Error at Sync Proccess</Alert>;
           };
   
           return response;
       };
    
       return (
           <Button onClick={PostSyncStatus}>
               Sync App
           </Button>
       );
   };
   

Answer 1

请求完成后使用window.location.reload()：

async function PostSyncStatus() {
  const response = await apiClient.updataSyncStatus(`${entity.metadata.name}`);

  if (response.status !== 200) {
    return <Alert severity='error'>Error at Sync Proccess</Alert>;
  } else {
    window.location.reload();
  }

  return response;
};

Answer 2

您可以使用

window.location.reload(false);

或更新您要更新的组件的状态