在反应功能组件中添加 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它对您有用。

你可以在这里看到一个例子