在反应功能组件中添加 valueFormatter 时，Ag Grid 无法加载

Question

我在反应功能组件中使用 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它对您有用。你可以在这里看到一个例子