如何实现点击按钮才获取Airtable记录？解决Hook调用错误

错误原因 #

你遇到的Invalid hook call错误，核心是React Hooks必须在函数组件的顶层作用域调用，不能嵌套在onClick这类回调函数里。你的getRecords函数内使用了useBase和useRecords两个Hooks，在点击回调里调用它直接违反了Hook的使用规则，触发报错。

另外，useRecords本身是自动订阅数据的Hook，组件挂载时就会自动请求并监听表格数据，这也是初始代码会加载大量数据的原因——它不符合你"按需加载"的需求。

解决方案 #

要实现点击按钮才获取记录，需要改用Airtable Blocks提供的手动查询API，替代自动订阅的useRecordsHook。具体实现步骤：

1. 在组件顶层合法调用useBase获取base实例（符合Hook规则）
2. 在点击回调中，通过base实例获取目标表格，调用表格的selectRecordsAsync方法异步获取记录
3. 用useState管理加载状态和获取到的记录，优化交互体验

修改后的完整代码 #

import React, { useState } from "react";
import { useBase, Button } from "@airtable/blocks/ui";

export default function RunButton({ Item }) {
  const base = useBase();
  const [records, setRecords] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const onClick = async () => {
    setIsLoading(true);
    try {
      // 获取目标表格实例
      const table = base.getTableIfExists(Item.table);
      if (!table) {
        console.error("目标表格不存在");
        return;
      }
      // 手动发起记录查询，支持自定义筛选、字段等条件
      const fetchedRecords = await table.selectRecordsAsync();
      setRecords(fetchedRecords.records);
      // 打印记录ID
      fetchedRecords.records.forEach(record => console.log(record.id));
    } catch (err) {
      console.error("获取记录失败:", err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Button size="small" icon="play" onClick={onClick} disabled={isLoading}>
      {isLoading ? "加载中..." : "Run"}
    </Button>
  );
}

代码说明 #

• useBase在组件顶层调用，完全符合Hook使用规则，不会触发报错
• selectRecordsAsync是异步方法，搭配async/await处理，仅在点击按钮时发起请求，彻底避免初始加载大量数据
• 新增isLoading状态，点击后按钮置灰并显示"加载中..."，优化用户等待体验
• 加入错误捕获逻辑，避免请求失败导致页面异常
• 如果需要筛选特定记录或指定返回字段，可以给selectRecordsAsync传入配置参数，示例：

  const fetchedRecords = await table.selectRecordsAsync({
    fields: ["名称", "金额"], // 指定要获取的字段
    filterFormula: "{状态} = '已完成'" // 自定义筛选条件
  });
  

内容的提问来源于stack exchange，提问作者Random Data Monster