未知字段key时如何使用React将Airtable API返回数据渲染为动态表格

核心实现逻辑如下：

• 先从接口返回的records数组中提取所有字段名作为动态表头：Airtable同一张表返回的每条记录fields的key是统一的，取第一条记录的fields对象的key集合即可作为表头
• 渲染表格行时按表头的固定顺序遍历取值，不需要提前硬编码任何字段名

完整代码示例：

import { useState, useEffect } from 'react';

const AirtableTable = () => {
  const [records, setRecords] = useState([]);
  const [headers, setHeaders] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 替换为实际调用Airtable API的逻辑
    const fetchAirtableData = async () => {
      const res = await fetch('你的Airtable接口请求地址');
      const data = await res.json();
      const rawRecords = data.records || [];
      setRecords(rawRecords);
      
      // 提取动态表头，有数据时取第一条记录的fields的所有key
      if (rawRecords.length > 0) {
        const dynamicHeaders = Object.keys(rawRecords[0].fields);
        // 如需自定义表头顺序，可以在这里对dynamicHeaders数组做排序处理
        setHeaders(dynamicHeaders);
      }
      setLoading(false);
    };
    fetchAirtableData();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (records.length === 0) return <div>暂无数据</div>;

  return (
    <table border="1" cellPadding="8" cellSpacing="0" style={{ borderCollapse: 'collapse', width: '100%' }}>
      {/* 动态渲染表头 */}
      <thead>
        <tr>
          {headers.map(header => (
            <th key={header} style={{ background: '#f8f9fa', textAlign: 'left' }}>
              {header}
            </th>
          ))}
        </tr>
      </thead>
      {/* 动态渲染表格内容 */}
      <tbody>
        {records.map(record => (
          <tr key={record.id}>
            {headers.map(header => (
              <td key={header}>
                {/* 空值兜底，避免渲染undefined报错 */}
                {record.fields[header] ?? ''}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default AirtableTable;

注意事项 #

• 如果需要展示Airtable自带的记录id、创建时间字段，直接把对应字段名加入headers数组即可
• 如果存在字段值为特殊类型（比如附件、多选、关联表字段），需要根据Airtable返回的对应字段结构单独做渲染适配

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