React使用material-table树模式新增行时栈溢出报错如何解决

该报错是material-table树结构模式下新增行的典型问题，核心触发原因是parentChildData递归匹配父节点时进入死循环：新增行的parentId取值异常（比如和自身id相等、和不存在的id匹配、未设置空值默认值），导致内部parentFunc被无限调用，最终栈溢出。

• 首先规范新增行的parentId默认值
  如果新增的是顶级行，必须在handleRowAdd方法里主动给newData.parentId赋值为null，不能留空、设为undefined或者空字符串；如果新增的是子行，确保parentId对应的父行id真实存在，同时保证新增行的全局id唯一，不会出现newData.id === newData.parentId的自引用情况。

• 给parentChildData加边界校验，避免死循环
  修改原parentChildData配置，增加无效值、自引用的拦截逻辑：

parentChildData={(row, rows) => {
  // 拦截无效parentId和自引用情况，直接返回null不匹配父节点
  if (!row.parentId || row.parentId === row.id) return null
  return rows.find(item => item.id === row.parentId)
}}

• 验证拖拽配置的兼容性
  你当前开启了draggable: true，部分material-table版本存在树结构+拖拽+新增行的内部兼容bug，可先把该配置改为false测试报错是否消失。如果确认是版本问题，可降级到material-table@1.69.3稳定版，该版本对树结构编辑功能的适配更完善。

• 检查handleRowAdd的实现逻辑
  确保新增行提交后，你更新this.state.equipments的逻辑是正确的，不要出现重复插入、id重复的问题，数据更新后要正确调用resolve()结束编辑状态。

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