ReactJS下ag-grid动态列场景如何实现动态新增数据行

该需求在React + ag-grid技术栈下完全可实现，你之前的代码报错是因为混淆了行对象构造逻辑、API参数格式和JS基础语法，正确实现方式如下：

错误原因说明 #

你原代码的核心问题：

• 混淆了「行数据对象」和「数组」的用法：updateRowData的add参数接收的是行对象组成的数组，每一行是一个键值对和列field对应的对象，不是数组
• map方法使用错误：map是用来遍历数组返回新数组的，不能用来构造对象
• 语法错误：JS中没有int关键字，循环索引需要用let/var声明，updateRowData的参数需要是合法的对象格式，要加花括号包裹

正确实现代码 #

方式1：for循环构造行对象 #

// 构造空行对象，而非数组
const newRow = {}
// JS循环用let声明索引
for(let i = 0; i < myProductColumnsArrAtRunTime.length; i++) {
    const currentColumn = myProductColumnsArrAtRunTime[i]
    // 用列的field作为行对象的key，可按需设置默认值，示例用column.category作为值
    newRow[currentColumn.field] = currentColumn.category
}
// 调用API，add参数是行对象组成的数组，入参要包裹在对象中
gridApi.updateRowData({ add: [newRow] })

方式2：用Array.reduce简化写法（更推荐） #

const newRow = myProductColumnsArrAtRunTime.reduce((rowObj, currentColumn) => {
    rowObj[currentColumn.field] = currentColumn.category
    return rowObj
}, {})
gridApi.updateRowData({ add: [newRow] })

注意事项 #

• 动态列配置中每个列必须指定field属性，行对象的key需要和对应列的field值完全一致，否则列无法正常渲染数据
• 如果需要设置不同列的默认值，可直接在动态列的配置项中新增自定义字段（比如defaultValue），构造行对象时读取对应字段赋值即可
• 不需要额外修改ag-grid的列配置，只要行数据key匹配，ag-grid会自动适配动态列渲染

内容的提问来源于stack exchange，提问作者newbie2000