React ag-grid OnGridReady setRowData 为空 - 如何在调用 OnGridReady 之前加载数据？

Posted 2023-02-21

【中文标题】React ag-grid OnGridReady setRowData 为空 - 如何在调用 OnGridReady 之前加载数据？

【英文标题】：React ag-grid OnGridReady setRowData is null - how to load data before OnGridReady get called?

【发布时间】：2020-06-20 17:26:55

【问题描述】：

我正在使用 useEffect 挂钩来调用我的数据 api 和 AgGrid onGridReady 来填充数据。我遇到的问题是，当我第一次使用 setRowData 填充 AgGrid 时，orderData 为 null。问题似乎在通过 api 获取订单数据并设置之前调用了 setRowData。 （我不想使用超时选项，因为在我的情况下它不是一个可行的选项）

有没有一种方法可以在我的网格加载后调用 onGridReady setRowData（调用后挂钩）。目前它只有在我刷新时才有效（我有一个再次调用 gridApi.setRowData 的刷新函数，这次它有效）

这是我的 orderdata 状态和 ag-grid-react 组件

    const [orderData, setOrderData] = useState([]);
    const [gridApi, setGridApi] =useState(null);



    const onGridReady = params => 
    setGridApi(params.api);
    params.api.setRowData(orderData);//this is null which i want not null
    params.api.sizeColumnsToFit();
;

获取数据和retrieveOrderByBondID的钩子将设置orderDataState

useEffect(() => 
    retrieveOrdersByBondId(props.Id);

, [props.Id]);



                <AgGridReact
                enableCellChangeFlash=true
                columnDefs=columns
                onGridReady=onGridReady
            />

【问题讨论】：

您找到解决此问题的方法了吗？我也面临同样的问题

【参考方案1】：

你应该调用params.api.setRowData(orderData);，当你的 orderData 准备好时触发效果，而不是 grid 准备好时：

useEffect(() =>  gridApi.setRowData(orderData)  , [orderData]);

在您提到刷新设置数据的位置的情况下，您的 orderData 很可能已经加载，并且设置它会正常工作。