无法使用 Typescript 中的 React 钩子在 Ag-Grid 中获取 gridApi

Posted 2023-03-28

【中文标题】无法使用 Typescript 中的 React 钩子在 Ag-Grid 中获取 gridApi

【英文标题】：Cannot get gridApi in Ag-Grid using React hooks in Typescript

【发布时间】：2021-08-26 01:59:33

【问题描述】：

我正在使用 函数组件 与 typescript 进行反应。这是我的组件的样子

const Table = (props: TableProps) => 

const [gridApi, setGridApi] = React.useState(() => )

  const gridOptions = 
    rowData: rowData,
    columnDefs: columnDef,
    pagination: true,
  

const onGridReady = (params) => 
    setGridApi(params.api);



  return (
    <div className="ag-theme-alpine" >
      <AgGridReact gridOptions=gridOptions onGridReady=onGridReady/>
    </div>
  );
;

我需要获取gridApi，以便在处理程序中使用它，以便另一个组件进行快速过滤。

查看文档HERE，推荐的方法是抓取gridApi并将其存储在一个状态中。考虑到我在这里使用功能组件就是我所做的

const [gridApi, setGridApi] = React.useState(() => )

当我在处理程序中这样做时：

  const handleTableFilter = (filterText: string) => 
      gridApi.setQuickFilter(filterText) // error here - Property 'setQuickFilter' does not exist on type '() => void'.
  

Typescript 抱怨 Property 'setQuickFilter' does not exist on type '() => void'.

我也尝试了为 javascript HERE 推荐的模式，但我也不太明白。

对于如何在我的用例中存储 gridApi（Typescript、React using Function components - react hooks），我将不胜感激。如果可能的话，我更喜欢一个不需要在useState 中存储函数的解决方案。如果没有，我可以接受任何解决方案。

【问题讨论】：

基于这些文档，您需要做的就是import grid api 并将其呈现为一个反应组件......为什么需要将它存储在 state 中？你只需导入它。此文档链接中的third block of code 对此进行了解释。您帖子中的错误来自打字稿以及您当前将gridApi 的状态设置为一个不返回任何内容的空函数这一事实。您似乎也没有在组件中使用gridApi 和setGridApi。这样做的目的是什么？

参见文档中的方法somePointLater()。在初始化状态之前，您必须立即使用handleTableFilter 中的gridAPI。这导致了这个问题。还有gridAPI 是一个对象，但是您使用() => void 类型的空函数初始化了状态。要么将状态类型更改为any，要么从包中导入gridAPI的类型并将其设置为状态类型。

试试this。

另一种选择是做React.useState<GridApi>() 然后像这样访问它gridApi?.setQuickFilter(filterText)

【参考方案1】：

这是我最终在 Typescript 中正确获取 GridApi 所做的工作（问题中的 Mike Abeln cmets 为我指明了正确的方向）

const Table = (props: TableProps) => 

// - - - - omitted code for column & row data from props - - - -

  const gridApiRef = useRef<any>(null); // <= defined useRef for gridApi

  const [rowData, setRowData] = useState<any[]>([]);
  const [columnDef, setColumnDef] = useState<any[]>([]);

// - - - - omitted code for useEffect updating rowData and ColumnDef - - - -

  const gridOptions = 
    pagination: true,
  

const onGridReady = (params) => 
    params.api.resetRowHeights();
    gridApiRef.current = params.api // <= assigned gridApi value on Grid ready


  const handleTableFilter = (filterText: string) => 
    gridApiRef.current.setQuickFilter(filterText); // <= Used the GridApi here Yay!!!!!
  

  return (
    <div className="ag-theme-alpine" >
      <AgGridReact columnDefs=columnDef 
      rowData=rowData 
      gridOptions=gridOptions 
      onGridReady=onGridReady 
      ref=gridApiRef/> // the gridApiRef  here
    </div>
  );
;

虽然我在表格上看到了一些性能问题（表格很大，大约有 60 万行），但这回答了有关如何获取 GridApi 并使用它进行过滤的问题