如何点击表格行切换显示新表格？（ag-Grid-React+API场景）

核心方案 #

利用ag-Grid-React内置的行/单元格点击事件，捕获选中行的车型信息，调用目标API获取数据后直接替换原表格的数据源即可，无需依赖history API或复杂过滤逻辑。

完整代码示例 #

import { useState, useEffect, 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 CarTable = () => {
  const [tableData, setTableData] = useState([]);
  const [loading, setLoading] = useState(false);
  const gridRef = useRef(null);

  // 初始加载列表数据
  useEffect(() => {
    fetchInitialData();
  }, []);

  const fetchInitialData = async () => {
    setLoading(true);
    try {
      const res = await fetch('/api/initial-car-list');
      const data = await res.json();
      setTableData(data);
    } catch (err) {
      console.error('初始数据加载失败:', err);
    } finally {
      setLoading(false);
    }
  };

  // 行点击事件处理
  const onRowClicked = async (event) => {
    // 仅响应Model列的点击（可根据需求去掉判断，处理任意行点击）
    if (event.column.colId === 'model') {
      const selectedModel = event.data.model;
      setLoading(true);
      try {
        // 请求对应车型的详情数据
        const res = await fetch(`/api/car-details?model=${encodeURIComponent(selectedModel)}`);
        const detailData = await res.json();
        // 替换原表格数据
        setTableData(detailData);
        // 若新表格列结构不同，可在此更新列配置：
        // setColumnDefs(newColumnDefs)
      } catch (err) {
        console.error('车型数据加载失败:', err);
      } finally {
        setLoading(false);
      }
    }
  };

  // 初始列定义
  const columnDefs = [
    { headerName: '品牌', field: 'brand' },
    { headerName: '车型', field: 'model', cellStyle: { cursor: 'pointer' } },
    { headerName: '指导价', field: 'price' }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 600, width: '100%' }}>
      {loading && <div style={{ padding: 12, color: '#666' }}>数据加载中...</div>}
      <AgGridReact
        ref={gridRef}
        columnDefs={columnDefs}
        rowData={tableData}
        onRowClicked={onRowClicked}
        pagination={true}
      />
    </div>
  );
};

export default CarTable;

关键细节说明 #

• 事件选择：用ag-Grid的onRowClicked（或onCellClicked）替代手动绑定onClick，适配表格的虚拟渲染机制，避免事件丢失。
• 状态驱动：通过useState管理表格数据源，数据更新后ag-Grid会自动触发重渲染，无需手动调用刷新方法。
• 列结构切换：如果新表格的列和原表格不同，可将columnDefs也改为状态变量，在获取新数据时同步更新。
• 体验优化：添加loading状态防止重复请求，给Model列设置cursor: pointer提示用户可点击。
• 错误处理：API请求包裹try/catch，避免前端崩溃，可根据需求添加用户可见的错误提示。

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