如何在ag-grid React表格中展示useQuery API调用失败的错误提示

要区分API调用失败和正常无数据的场景，你可以通过维护错误状态并动态自定义AG Grid的无数据覆盖层模板来实现，具体步骤如下：

• 维护错误状态：在代码中添加一个变量（比如apiError），专门记录API请求失败时的错误信息。
• 动态切换覆盖层内容：根据apiError是否存在，渲染不同的覆盖层模板——有错误时显示错误提示，无错误时显示默认的无数据提示。

示例实现（React） #

import { useState, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const MyGrid = () => {
  const [rowData, setRowData] = useState([]);
  const [apiError, setApiError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const gridApi = useRef(null);

  const fetchData = async () => {
    setIsLoading(true);
    setApiError(null);
    try {
      const response = await fetch('/your-api-endpoint');
      if (!response.ok) throw new Error(response.statusText);
      const data = await response.json();
      setRowData(data);
    } catch (err) {
      setApiError(`API调用失败：${err.message}`);
      setRowData([]); // 清空数据确保覆盖层显示
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="ag-theme-alpine" style={{ height: 400 }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={[/* 你的列定义 */]}
        overlayLoadingTemplate='<span class="ag-overlay-loading-center">数据加载中...</span>'
        overlayNoRowsTemplate={
          apiError ? (
            '<div class="ag-overlay-no-rows-center" style="color: #dc3545; font-size: 16px;">' + apiError + '</div>'
          ) : (
            '<span class="ag-overlay-no-rows-center">暂无数据</span>'
          )
        }
        onGridReady={() => fetchData()}
      />
    </div>
  );
};

export default MyGrid;

示例实现（原生JavaScript） #

let gridApi;
let apiError = null;

// 列定义
const columnDefs = [/* 你的列定义 */];

// 网格配置
const gridOptions = {
  columnDefs: columnDefs,
  overlayLoadingTemplate: '<span class="ag-overlay-loading-center">数据加载中...</span>',
  overlayNoRowsTemplate: '<span class="ag-overlay-no-rows-center">暂无数据</span>',
  onGridReady: (params) => {
    gridApi = params.api;
    fetchData();
  }
};

// 初始化网格
new agGrid.Grid(document.getElementById('myGrid'), gridOptions);

// 数据请求函数
function fetchData() {
  apiError = null;
  gridApi.showLoadingOverlay();
  
  fetch('/your-api-endpoint')
    .then(response => {
      if (!response.ok) throw new Error(response.statusText);
      return response.json();
    })
    .then(data => {
      gridApi.setRowData(data);
      gridApi.hideOverlay();
    })
    .catch(err => {
      apiError = `API调用失败：${err.message}`;
      gridApi.setRowData([]);
      // 更新错误覆盖层模板
      const errorTemplate = `<div class="ag-overlay-no-rows-center" style="color: #dc3545; font-size: 16px;">${apiError}</div>`;
      gridApi.setOverlayNoRowsTemplate(errorTemplate);
      gridApi.showNoRowsOverlay();
    });
}

关键要点 #

• 必须在API失败时清空rowData，否则AG Grid会优先渲染已有数据，不会显示无数据覆盖层。
• 可以通过自定义CSS样式美化错误提示，比如调整颜色、字体大小，让用户更容易注意到错误状态。
• 不要依赖AG Grid默认的无数据覆盖层区分失败场景，必须通过错误状态主动控制模板内容。

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