如何将BigQuery返回的数组数据渲染到MUI DataGrid？

你当前代码的核心问题是rows和columns变量未从BigQuery返回的数组数据中正确生成，导致DataGrid无法正常渲染。以下是修正后的实现方案：

核心规则说明 #

MUI DataGrid对数据格式有明确要求：

• rows必须是包含唯一id字段的对象数组（若你的数据无原生id，可手动生成或指定现有唯一字段替代）
• columns是定义列配置的数组，需包含field（对应数据键名）和headerName（表头显示文本）

修正后的完整代码 #

import { DataGrid, GridToolbar } from '@mui/x-data-grid';
import { useState } from 'react';
import axios from 'axios';
import { useMode } from './your-mode-module'; // 根据实际路径调整

const BigQueryFetcher = () => {
  const [auditTimestamp, setAuditTimestamp] = useState('');
  const [agentName, setAgentName] = useState('');
  const [queryResult, setQueryResult] = useState([]); // 初始化为空数组，避免类型判断异常
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [theme, colorMode] = useMode();
  const [isSidebar, setIsSidebar] = useState(true);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await axios.post('http://localhost:3001/bigquery-data', {
        auditTimestamp,
        agentName
      });
      setQueryResult(response.data);
    } catch (error) {
      console.error('数据获取失败:', error);
      setError('获取数据失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  const renderDataGrid = () => {
    if (!Array.isArray(queryResult) || queryResult.length === 0) {
      return <div>暂无数据</div>;
    }

    // 从数据键名动态生成列配置
    const columns = Object.keys(queryResult[0]).map(key => ({
      field: key,
      headerName: key.charAt(0).toUpperCase() + key.slice(1), // 首字母大写作为表头
      flex: 1, // 自动分配列宽
      sortable: true, // 开启排序
      filterable: true // 开启筛选
    }));

    // 生成带唯一id的行数据，这里用索引+auditTimestamp确保唯一性
    const rows = queryResult.map((item, index) => ({
      id: `${index}-${item.auditTimestamp}`,
      ...item
    }));

    return (
      <div style={{ height: 600, width: '100%' }}>
        <DataGrid
          rows={rows}
          columns={columns}
          components={{ Toolbar: GridToolbar }}
          pagination // 启用分页
          pageSizeOptions={[5, 10, 20]} // 可选分页大小
          loading={loading} // 绑定加载状态
        />
      </div>
    );
  };

  return (
    <div>
      {/* 查询条件输入区域 */}
      <input
        type="text"
        placeholder="审计时间戳"
        value={auditTimestamp}
        onChange={(e) => setAuditTimestamp(e.target.value)}
      />
      <input
        type="text"
        placeholder="代理名称"
        value={agentName}
        onChange={(e) => setAgentName(e.target.value)}
      />
      <button onClick={fetchData} disabled={loading}>
        {loading ? '加载中...' : '查询数据'}
      </button>

      {error && <div style={{ color: 'red', margin: '10px 0' }}>{error}</div>}
      {renderDataGrid()}
    </div>
  );
};

export default BigQueryFetcher;

关键修改点 #

1. 初始化queryResult为空数组：避免初始状态下的类型判断错误
2. 动态生成列配置：自动从BigQuery返回数据的键名生成表头，并启用排序、筛选功能
3. 补充唯一id字段：通过索引结合数据中的唯一字段生成id，确保DataGrid能正确识别每条数据
4. 启用分页与加载状态：开启分页功能并绑定加载状态，优化用户体验
5. 空数据提示：替换原return null为友好的无数据提示

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