reactjs - 将新行添加到网格顶部的 ag-grid 反应

Question

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

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

1. 加载页面
2. 渲染网格（来自componentDidMount，向reducer请求数据）
3. 从 db 获取数据（角色列表）
4. 更新我的减速器以获得角色列表（标准化）-> 发送到组件
5. 我的 RolesComponent 现在对它收到的数据进行非规范化
6. 在网格上显示
7. 点击 [Add Button] -> dispatches action 创建角色 {name: '', description: ''}
8. 发送到 api，api 返回新角色
9. Reducers 将新角色添加到角色列表中
10. 加载新道具后刷新网格组件，将新的空角色添加到表格底部

因为我添加的角色是新的，它的 'id' 是最高的，因此我相信它会排到表的末尾。但是，我可以跳过任何要添加的减速器逻辑（第 9 步），然后像这样手动执行它：

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

在减速器没有“ADD_ROLE”的情况下，但这感觉很脏。我很困惑，不相信这是正确的道路。非常感谢采取一般或更好的方法。

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

Answer 1

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

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

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

Answer 2

您可以使用addIndex属性，所以在这种情况下

this.props.api.updateRowData({ add: [result], addIndex: 0 });