react-awesome-query-builder接入Material-UI时多struct分组选中字段不显示

问题场景 #

• 采用Material-UI方案为查询过滤器配置初始参数
• 字段配置中设置多个用于实现字段分组的!struct类型条目
• 触发异常：选中字段后，界面无法正常展示已选中的内容

当前字段配置代码结构 #

const fields: Fields = {
  user: {
    label: "User",
    tooltip: "Group of fields",
    type: "!struct",
    subfields: {
      // 分组下的子字段配置
    }
  },
  test1: {
    label: "test",
    type: "!struct",
    subfields: {
      // 分组下的子字段配置
    }
  }
}

常见问题诱因与排查方向 #

• 字段路径匹配逻辑缺陷：单!struct场景下的路径解析逻辑未适配多struct共存场景，查找选中内容时未对顶层struct字段名做层级匹配，导致路径定位失效。修复时可统一以顶层struct字段名.子字段名作为完整字段路径做映射查找，保证所有字段路径全局唯一。
• 状态存储冲突：不同struct分组下存储子字段值时，未拼接顶层struct的路径前缀，出现同名字段值的状态覆盖，导致已选内容无法正确对应到分组字段。修复时可在状态更新逻辑中，自动为struct分组下的所有子字段拼接所属struct的前缀作为存储键。
• 渲染组件取值逻辑偏差：已选内容渲染组件读取选中值时，默认按单struct场景的路径规则取值，多struct场景下取值层级错误，最终导致渲染为空。修复时可在渲染逻辑中适配嵌套路径的取值解析，支持多层级字段的路径拆解读取。

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