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

【问题标题】：React ag-grid OnGridReady setRowData is null - how to load data before OnGridReady get called?React ag-grid OnGridReady setRowData 为空 - 如何在调用 OnGridReady 之前加载数据？
【发布时间】：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}
            />

【问题讨论】：

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

标签： reactjs react-hooks ag-grid ag-grid-react

【解决方案1】：

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

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

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

【讨论】：