ApiSelect 重复请求问题

[masicheng]

⚠️ 重要 ⚠️ 在进一步操作之前，请检查下列选项。如果您忽视此模板或者没有提供关键信息，您的 Issue 将直接被关闭

• 已阅读 文档.
• 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
• 已在 Issues 中搜索了相关的关键词
• 不是 ant design vue 组件库的 Bug

描述 Bug

componentProps 使用 formModel时，会导致多次请求

复现 Bug

watchEffect(() => {
props.immediate && !props.alwaysLoad && fetch(); //多次触发此方法
});
componentProps: ({ formModel }) => {
return {
};
},

系统信息

• 操作系统:
• Node 版本:
• 包管理器 (npm/yarn/pnpm) 及其版本:

[littlecoder20]

有解决吗？

[masicheng]

没有，如果要使用ApiSelect避免使用该属性，我是使用Select另外封装了组件

[Kevin-KangShao-Yang]

解决方案有两种：
1、设置 immediate: false,
componentProps: ({ formModel, formActionType }) => {
return {
immediate: false,
}
}

2、传入回调函数，让表单赋值在回调事件中去做
const selectChange = async (e) => {
unref(formData).lineCode = undefined
await setFieldsValue({
lineCode: undefined
})
const data = await getCodeList(id)
updateSchema({
field: 'lineCode',
componentProps: {
options: data,
fieldNames: {
label: 'name',
value: 'code'
}
}
})
}

const [registerForm, { updateSchema }] = useForm({
schemas: formSchema (selectChange),
})

export const formSchema = (selectChange: Fn): FormSchema[] => {
return [
{
field: 'code',
label: 'code',
component: 'ApiSelect',
componentProps: ({formActionType }) => {
return {
onChange: async (e) => {
if (!formActionType) {
return
}
selectChange(e)
},
api: getList,
labelField: 'name',
valueField: 'code'
}
}
},
{
field: 'lineCode',
label: 'lineCode',
component: 'Select'
},
]
}

如果你是其中一个select依赖另一个ApiSelect时，可以使用以下方式解决
解决方式如下：
componentProps: ({ formModel, formActionType }) => {
return {
onChange: async (e) => {
// 当formActionType存在的时候再往下执行
if (!formActionType) {
return
}
unref(formModel).lineCode= undefined
const data = await getCodeList(e)
const { updateSchema } = formActionType
updateSchema({
field: 'lineCode',
componentProps: {
options: data,
placeholder: '',
fieldNames: {
label: 'name',
value: 'code'
}
}
})
},
api: getList,
labelField: 'name',
valueField: 'code'
}
}

[wangjue666]

这PR #3005 已修复

[masicheng]

修复的是ApiTreeSelect,ApiSelect还是存在这个问题

[wangjue666]

抱歉 看岔眼了

[masicheng]

您好，我现在还碰到了另外的问题，就是table搜索时，field的字段会自动添加到formModel里面，field优先级更高，我在onchange里面修改该字段值无效。但是有的时候我并不需要，比如我需要对onChange返回的数据进行处理。这种情况我该如何处理

[wangjue666]

@masicheng

const schemas: FormSchema[] = [
  {
    field: 'field',
    component: 'ApiSelect',
    label: 'ApiSelect',
    componentProps: ({ formModel }) => {
      console.log('使用formModel了', formModel);
      return {
        immediate: true,
        api: async () => {
          console.log('请求接口了');
          return [
            {
              label: '测试1',
              value: '1',
            },
            {
              label: '测试2',
              value: '2',
            },
          ];
        },
      };
    },
    colProps: {
      span: 8,
    },
    required: true,
  },
];

没有复现出你说的重复请求

[wangjue666]

您好，我现在还碰到了另外的问题，就是table搜索时，field的字段会自动添加到formModel里面，field优先级更高，我在onchange里面修改该字段值无效。但是有的时候我并不需要，比如我需要对onChange返回的数据进行处理。这种情况我该如何处理

另开个issue, 提供好你的测试代码

[masicheng]

我使用你的代码复现了重复请求的问题，是否我们版本不一致导致，是最近有修复这个问题么？

[wangjue666]

最近几个月改动有些多，记不清了， 你试着拉取下最新的代码测试下

[masicheng]

拉取了最新代码还是这样，我测试了，放在form表单里面正常，但是放在table的搜索区域就会出现这个问题

[wangjue666]

好滴 我闲了定位这个错误

[wangjue666]

那就跟这个 #2738 反馈的问题一致

[wangjue666]

@masicheng #3107 这个PR应该解决了，兄弟你再测试下

[masicheng]

重复请求的问题解决了，但是又有了新的问题，onChange事件会触发两次

[wangjue666]

@masicheng 0f2c2ea
b103c64
这个修复了重复请求