在Ag grid react中,如果使用useState()或useReducer()Hooks更新状态,则不支持第二个回调参数。为了解决这个问题,我们需要在更新状态时使用useEffect()Hook。下面是一个示例代码:
import React, { useEffect, useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
const MyComponent = () => {
const [gridOptions, setGridOptions] = useState({});
useEffect(() => {
setGridOptions({
columnDefs: [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
],
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
]
});
}, []);
return ;
};
export default MyComponent;
在上面的代码中,useEffect()在每次渲染时都会运行一次。当第二个参数为空时,它只会运行一次。在useEffect()中,我们可以使用setGridOptions()来更新状态。这样就可以避免Ag grid react的状态更新警告。