将新行添加到网格顶部的ag-grid进行响应

Question

我无法弄清楚我应该如何正确地在桌面顶部的ag-grid中添加一个空行。

现在这就是我的组件/用户生命周期：

1. 加载页面
2. 渲染网格（来自componentDidMount，要求来自reducer的数据）
3. 从db（角色列表）中获取数据
4. 更新我的reducer以获得角色列表（规范化） - ＆gt;发送给组件
5. 我的RolesComponent现在对其收到的数据进行非规范化
6. 在网格上显示
7. 点击[添加按钮] - ＆gt;发送行动以创建角色{name：＆＃39;＆＃39;，description：＆＃39;＆＃39;}
8. 发送到api，api返回新角色
9. Reducers为角色列表添加新角色
10. 刷新网格组件，因为加载了新的道具，新的空角色被添加到表格底部

因为我添加的角色是新的，所以我的角色是＆＃39;是最高的，因此我相信它走到了最后。但是我可以跳过任何减少器逻辑来添加（步骤9），只需手动执行此操作：

this.props.api.addDispatcher({name: '', description: ''}).then((result) => {
  this.props.api.updateRowData({ add: [result] });
});

如果减速器没有“ADD_ROLE”的情况，那么这感觉很脏。我很困惑，不相信这是正确的道路。我们非常感谢一般或更好的方法。

即便是我仍然坚持我是否应该使用redux来补充我的桌子或依赖于ag-grid api。理想情况下，我觉得使用ag-grid api更有效率。

Answer 1

您可以使用defaultGroupSortComparator的grid属性并提供一个id比较器来进行网格排序。

// your comparator
const sortbyId(first, second) => {
    // the logic;
}

render() {
    return( 
        <AgGridReact
         defaultGroupSortComparator={this.sortById}
    />);
}