前端表单联动，调用接口获取联动数据，如何合理处置？

Question

场景描述：

可编辑页面中有A,B,C,D,E等选项

• A,B,C的选择会触发接口请求，接口返回D的list数据并回显
• 编辑项均无默认值
• A,B,C均为D数据接口的入参，且A,B,C之间没有关联关系
• A,B,C为必传参数【某个参数可为",但不能是undefined】，任何一个参数的改变都会影响返回结果

方法调用：

// A,B,C修改调用方法checkOnchange(val, key)
// val 为A,B,C的值，key == A || key == B || key == C

checkOnchange(val, key) {
  // 关键代码
  const { A, B, C } = this.state
  if (key == A && B && C) {
    this.getDList(val, B, C);
  }
  if (key == B && A && C) {
    this.getDList(A, val, B);
  }
  if (key == C && A && B) {
    this.getDList(A, B, val);
  }
}

getDList(A,B,C) {
    SERVICE.getDListData({ A, B, C }).then(res => {
      this.setState({ list: res.data || []});
    })
}

目前尝试：

// A,B,C修改调用方法checkOnchange(val, key)
// val 为A,B,C的值，key === A || key === B || key === C

checkOnchange(val, key) {
  // 关键代码
  const { A, B, C } = this.state
  const paramObj = { A: A || '', B: B || '', C: C || ''}
  paramObj[key] = val;
  this.getDList(paramObj);
}

getDList(paramObj) {
    SERVICE.getDListData(paramObj).then(res => {
      this.setState({ list: res.data || []});
    })
}

疑惑描述：

• 目前为3个入参，若涉及较多参数>3的情况该如何简化处理？
• 当前业务场景只涉及到3个平级节点，若存在平级节点A,B,C的同时，又包含G和G的子节点H，H的子节点J...任何一个节点的改变都会影响D节点的返回数据，该如何优雅的处理？
  【由于目前业务涉及不到较复杂的联动交互，但是细思极恐，望各位提供个大概的思路和方向，有参考案例就更好了】

Answer 1

封装下拉选择组件，把请求放在封装组件里触发，
传参 params={{A,B,C}}，发生变化的时候触发下请求