react + redux 应用程序中的 agGrid 正在修改底层数据

Posted 2023-03-28

【中文标题】react + redux 应用程序中的 agGrid 正在修改底层数据

【英文标题】：agGrid in react + redux app is modifying underlying data

【发布时间】：2019-10-09 16:01:24

【问题描述】：

我在 react + redux 应用程序中使用最新的 agGrid 企业。

问题是我正在使用 agGrid 的内置编辑，这是直接修改底层数据，即从 redux 存储返回的数组。这打破了不变性原则。有没有办法使用/配置 agGrid 来修改数据，但是：

对更改做出反应并使用有关更改的信息调用一些回调 然后我可以更新 redux 存储（数组中的一项） 然后 agGrid 可以检测到数组中只有一个对象发生了变化，它只会刷新单行

谢谢

【问题讨论】：

我这里也有类似的问题。一旦你的状态（或道具）改变了，你能用新的行刷新 Ag-Grid 吗？

如果您连接您的单元格以提供从中获取数据的 fieldName，则编辑相同的内容将对其进行编辑。 AG-grid 不刷新，因为它硬编码以通过 React 使用 shouldComponentUpdate 来避免刷新以始终返回 false。

【参考方案1】：

编辑：更详细地扩展我的答案。

您必须设置一个“valueSetter”函数，并在每一列上设置它。最简单的方法是使用 defaultColDef。 快速注意，我表中的每一行都是一个“交易”，因此您会看到对交易的引用，而不是其他某种形式的标识。

例如：

<AgGridReact
      // OPTIONS REQUIRED FOR OPTIMIZATION WITH REACT
      reactNext
      deltaRowDataMode
      getRowNodeId=data => data.transaction_id

      // OTHER OPTIONS
      rowSelection="multiple"
      editType="fullRow"

      // TABLE DATA
      defaultColDef= ...defaultColDef, valueSetter 
      columnDefs=columns
      rowData=transactions

      // DISPLAY
      rowClassRules=rowClassRules

       // EVENTS
      onGridReady=onGridReady
      onRowEditingStarted=onRowEditingStarted
      onRowEditingStopped=onRowEditingStopped

    />

不要忘记react和redux需要的优化项。 (reactNext, deltaRowDataMode, getRowNodeId)。

我定义的defaultColDef很简单：

defaultColDef: 
  resizable: true,
  sortable: true,
  filter: true,
  editable: true,
,

而 valueSetter 是一个非常简单地定义为的函数：

const valueSetter = (params) => 
  allActions.columnEdit(params.data, params.oldValue, params.newValue, params.colDef);
  return false;
;

allActions.columnEdit 只是调用我在导入中定义的 Redux 操作，然后与 connect() 和 mapDispatchToProps 绑定。 return false 是防止状态突变所必需的。确保您的 redux 操作处理您需要做的任何事情。这是我的例子：

  case actionTypes.COLUMN_EDIT: 
  // FOR EACH COLUMN EDITED, CHECK IF ANYTHING CHANGED
  // POST CHANGES TO NEW STATE
  if (payload.oldValue !== payload.newValue) 
    const account = 'acct01';
    const column = payload.colDef.field;
    const index = state[account].transactions.findIndex(
      t => t.transaction_id === payload.t.transaction_id,
    );
    return produce(state, (draft) => 
      const transaction = draft[account].transactions[index];
      transaction[column] = payload.newValue;
    );
  
  return state;

希望这会有所帮助。对于应该由 Ag-Grid 直接处理的内容，似乎有很多额外的解决方法，但也许他们会在未来进行一些开发。

https://www.ag-grid.com/javascript-grid-value-setters/

【讨论】：

感谢 Scott，为我节省了一点时间 :)