在 React 功能组件中添加 valueFormatter 时 Ag Grid 加载失败

Question

我在 React 功能组件中使用 AgGrid 显示一些数据。对于作为对象的值，我试图显示它们的 json 值，我在 colDefs 中使用了 valueFormatter 选项，如下面的代码所示。但是当我使用这个时，我得到一个错误：

Error: ag-Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace.

如果我不使用 valueFormatter 选项，我不会遇到上述错误。我知道我需要根据错误在准备就绪时加载网格，但我不确定如何在反应功能组件中执行此操作。

代码示例：

import React, { useState } from "react";

import { AgGridReact, ICellRendererReactComp } from "ag-grid-react";
function Test(props) {
  const [rowData, setRowData] = useState(null);
  const defaultColDef = {
    sortable: true,
    filter: true,
    resizable: true,
  };
  const columnDefs = [
    {
      headerName: 'Sample Key',
      field: 'sampleKey',
      valueFormatter: (val) => JSON.stringify(val),
    },
    //OTHER COLDEFS
  ]
  
  return (
    <div className="container-fluid">
        <div className="card mt-2 p-3 bg-red shadow p-3 mb-5 bg-white rounded">
          <div
            className="ag-theme-balham"
            style={{ height: "500px", width: "100%" }}
          >
            <AgGridReact
              columnDefs={columnDefs}
              rowData={rowData}
            ></AgGridReact>
          </div>
        </div>
    </div>
  );
}

export { Test };

Answer 1

你的问题是：JSON.stringify(val)

您正在尝试在循环结构中使用 stringify。

因此，如果您将其更改为 val.value，它就适合您。

你可以看一个例子 here

在 React 功能组件中添加 valueFormatter 时 Ag Grid 加载失败

Ag Grid fails to load when adding valueFormatter in react functional Components

javascript

reactjs

ag-grid