如何正确向ag-grid传递输入？直接传rowData变量不生效问题排查

问题原因排查方向 #

• 异步数据加载时序问题
  这是最高概率的原因：你的peerData是异步请求拿到的，初始化gridOptions的时候，异步请求还没返回结果，此时传给agGrid的rowData是空值或者未完成赋值的初始值。
  浏览器控制台打印引用类型（数组/对象）时采用懒加载机制，你在控制台看到的打印结果实际是你点击展开那一刻的对象值，此时异步请求已经完成，peerData已经被赋值，你复制的就是请求完成后的完整数据，手动写死的静态值初始化时就存在，所以可以正常渲染。
• 数据被框架响应式代理包裹
  如果你的项目用了Vue、React这类框架，peerData可能是被框架封装过的Proxy响应式对象，agGrid的内部逻辑对非原生JS数组的兼容有问题，无法正常读取代理对象里的行数据。你从控制台复制出来的内容是脱代理后的纯原生JS数组，所以赋值后可以正常运行。
• 数据结构不匹配
  peerData的实际结构可能和你预期不符，比如外层多嵌套了一层对象（比如返回格式是{code:200, data:[...], msg:"success"}），你直接传整个返回对象给rowData自然不生效，而你从控制台打印结果里复制的时候，只复制了内层的行数据数组，所以手动赋值后符合agGrid的格式要求。
• agGrid行数据更新机制未触发
  agGrid初始化完成后，直接修改gridOptions.rowData变量不会自动触发视图更新，需要调用agGrid暴露的api.setRowData()方法手动更新行数据，或者对应框架的agGrid组件开启了响应式绑定开关才会自动监听rowData变化。你写死静态值是在初始化阶段就传入了正确数据，所以可以正常渲染。

验证&解决方法 #

1. 在getPeerData函数开头加一行console.log(JSON.stringify(rows))，打印序列化后的字符串，这个结果是函数执行那一刻的真实值，如果是空值或者结构不对就能直接看出问题，避免控制台懒加载的误导。
2. 如果是异步问题，等peerData请求完成之后再初始化agGrid，或者拿到数据后调用gridApi.setRowData(peerData)手动更新。
3. 如果是响应式代理问题，传值的时候先做一次脱代理处理：rowData: JSON.parse(JSON.stringify(peerData))，转成纯原生数组再传给agGrid。

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