如何只在点击按钮时选择记录？

Question

我正在使用 Airtable 块来创建扩展。我有一个按钮，按下该按钮后，应该检索记录。但是，当单击按钮时我无法让它运行......仅当加载按钮时。我只希望它在单击时运行，因为我有很多表，并且一次加载所有表中的所有记录可能有点过头了。如何让它仅在按下按钮时运行？我得到的错误是

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

没有

 import React, { useState, useEffect } from "react";
 import { useBase, useRecords, Button } from "@airtable/blocks/ui";
 
 function getRecords(Item) {
   const base = useBase();
   const table = base.getTableIfExists(Item.table);
   return useRecords(table);
 }
 
 export default function RunButton({ Item }) {
   // This works but will potentially load a LOT of data
   const records = getRecords(Item);
   records.map((record) => {
     console.log(record.id);
   });
 
   // This errors
   function onClick() {
     const records = getRecords(Item);
     records.map((record) => {
       console.log(record.id);
     });
   }
 
   return (
     <Button size="small" icon="play" onClick={onClick}>
       Run
     </Button>
   );
 }

Answer 1

useBase

和

useRecords

似乎是自定义钩子（可能包括本机 React 钩子）。您不能有条件地调用挂钩，例如在事件中。

尝试删除

const records = getRecords(Item);

来自 onClick 函数。当项目更改时，记录内容应自动更新。您不需要第二次调用它。

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

function getRecords(Item) {
  const base = useBase();
  const table = base.getTableIfExists(Item.table);
  return useRecords(table);
}

export default function RunButton({ Item }) {
  const records = getRecords(Item);
  records.map((record) => {
    console.log(record.id);
  });

  function onClick() {
    // remove this line, everything should work the same
    // const records = getRecords(Item);
    records.map((record) => {
      console.log(record.id);
    });
  }

  return (
    <Button size="small" icon="play" onClick={onClick}>
      Run
    </Button>
  );
}