React AgGrid 中的数据更改时更改状态栏组件

Question

我需要更改道具更改时显示在自定义状态栏中的值。所以假设我得到了：

const CustomGrid = ({
   data, lastUpdate, framweworkComponents, columns
}) => {

  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);
  const [gridParams, setGridParams] = useState(null);

  const onGridReady = (params) => {
     setGridApi(params.api);
     setGridColumnApi(params.columnApi);
     setGridParams(params);
  }
 };

  
  const renderLastUpdateStatusBar = () => (
      <div>
         {lastUpdate}
      </div>
  );

  return(
    <div className={theme || 'ag-theme-balham'} style={style}>
      <AgGridReact
        modules={AllModules}
        onGridReady={onGridReady}
        columnDefs={columns}
        rowData={data}
        defaultColDef={defaultColDef || {
          resizable: true,
          menuTabs: [],
        }}
        frameworkComponents={{
          ...frameworkComponents,
          lastUpdateStatusBarComponent: renderLastUpdateStatusBar,
        }}
        statusBar={{
          statusPanels: [
            {
              statusPanel: 'lastUpdateStatusBarComponent',
              key: 'lastUpdateStatusBarKey',
              align: 'left',
            },
          ],
        }
      />
    </div>

 )
}

当 'lastUpdate' 发生变化时，它会正确传递给 CustomGrid 组件，但状态栏不会重新呈现，所以我永远看到第一个值。我的目标是在每次 'lastUpdate' 更改时更新状态栏。我尝试制作一个包含我的框架组件的状态，并在 lastUpdate 更改时将其设置在 useEffect 中，然后将此状态放入 agGrid 的 frameworkComponents prop 中，但它不起作用：

  const [frameworkC, setFrameworkC] = useState(null);

  useEffect(() => {
    setFrameworkC({
      ...frameworkComponents,
      lastUpdateStatusBarComponent: renderLastUpdateStatusBar,
    })
  }, [lastUpdate]);

  ...
  <AgGridReact
     ...
     frameworkComponents={frameworkC}
     ...
  >

我也尝试在 onGridReady 函数中设置此状态，结果相同。我也试过在useState中调用api.redrawRows(gridParams)，没办法。

是否有一些 API 我可以用来更新状态栏组件？或者有什么方法吗？

Answer 1

您需要为要重新呈现的组件添加密钥

 <AgGridReact
        key={lastUpdate}
        modules={AllModules}
        onGridReady={onGridReady}
        columnDefs={columns}
        rowData={data}
        defaultColDef={defaultColDef || {
          resizable: true,
          menuTabs: [],
        }}
        frameworkComponents={{
          ...frameworkComponents,
          lastUpdateStatusBarComponent: renderLastUpdateStatusBar,
        }}
        statusBar={{
          statusPanels: [
            {
              statusPanel: 'lastUpdateStatusBarComponent',
              key: 'lastUpdateStatusBarKey',
              align: 'left',
            },
          ],
        }
      />

React AgGrid 中的数据更改时更改状态栏组件

Change Status Bar Component when data change in React AgGrid

javascript

ecmascript-6

reactjs

ag-grid-react