Vaadin 14.7.5中Tree Grid点击展开触发递归溢出错误如何解决

该递归报错是Vaadin Grid 5.9.0版本（对应Vaadin 14.7.5）数组数据提供器处理树形数据的已知缺陷：当item-has-children-path配置为子节点数组本身对应的字段时，_arrayDataProvider的子节点加载逻辑与Polymer属性变更监听会互相触发，形成死循环最终栈溢出。

方案1：拆分标识字段与子节点数组字段 #

新增独立的布尔字段标识节点是否存在子节点，避免直接用子节点数组字段作为是否有子节点的判断依据：

1. 调整数据结构，新增hasSubtasks字段：

{
  "id": 18,
  "name": "1",
  "complete": false,
  "subtasks": [
    {
      "id": 19,
      "name": "1.1",
      "complete": false,
      "subtasks": [],
      "hasSubtasks": false,
      "teammates": []
    }
  ],
  "hasSubtasks": true,
  "teammates": []
}

2. 修改vaadin-grid-tree-column的item-has-children-path属性为新增的布尔字段：

<vaadin-grid-tree-column 
  header="Name" 
  path="name" 
  item-has-children-path="hasSubtasks">
</vaadin-grid-tree-column>

方案2：自定义数据提供器 #

如果不想修改原有数据结构，可以手动实现数据提供逻辑，替代有缺陷的默认数组数据提供器：

render() {
  return html`
      <vaadin-grid id="tree"
        .dataProvider="${(params, callback) => {
          // 根节点取顶级任务列表
          if (!params.parentItem) {
            const rootItems = this.project ? this.project.top_level_tasks : [];
            callback(rootItems, rootItems.length);
            return;
          }
          // 子节点取当前节点的subtasks字段
          const subItems = params.parentItem.subtasks || [];
          callback(subItems, subItems.length);
        }}"
      >
          <vaadin-grid-tree-column header="Name" path="name" item-has-children-path="subtasks"></vaadin-grid-tree-column>
      </vaadin-grid>
  `;
}

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