ProFormSelect的request中使用节流 数据正常返回 但是下拉框内容没有进行更新

[Teddy1023]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

ProFormSelect的request中使用节流 数据正常返回 但是下拉框内容没有进行更新

💻 示例代码

🚑 其他信息

"antd": "^4.8.6", "@ant-design/pro-form": "^1.3.0",

[fmspwn8246]

同样的问题 请问解决了吗

[Teddy1023]

同样的问题 请问题解决了吗

并没有，，坐等大佬

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

如果数据正常返回，但是下拉框内容没有进行更新，很有可能是因为ProFormSelect组件没有正确绑定更新的值。你可以在代码中尝试以下解决方案：

1. 确认组件的valuePropName属性是否设置为value。如下所示：

// 正确设置
<ProFormSelect
  name="selectName"
  label="Select Label"
  valuePropName="value"
  request={() => {}}
/>

// 错误设置
<ProFormSelect
  name="selectName"
  label="Select Label"
  request={() => {}}
/>

2. 监听form表单中字段的变化，手动更新组件的值。如下所示：

const [options, setOptions] = useState([]);

return (
  <ProForm form={form}>
    <ProFormSelect
      name="selectName"
      label="Select Label"
      value={options}
      options={options}
      request={async () => {
          const res = await getData();
          setOptions(res.data);
          return res.data;
      }}
      onChange={(value) => {
        form.setFieldsValue({ selectName: value });
      }}
    />
  </ProForm>
);

通过手动更新value的值，可以保证下拉框内容正确更新。同时需要注意，如果不使用Ant Design Pro中的ProForm组件，可能需要手动设置表单的initialValues和onValuesChange，具体可参考Ant Design中form表单的文档。

[dlspacezero]

同碰到这个问题，觉得是因为ProFormSelect的filterOption 逻辑和输入关键字搜索的逻辑有冲突，我是在fieldProps加了filterOption: false 解决的

[ldwonday]

@chenshuai2144 看下这个filterOption参数，怎么处理下吧，遇到同样的问题：用value搜索的时候始终没有options。

[chenshuai2144]

欢迎搞个 pr 你都找到问题了

[github-actions[bot]]

Hello @Teddy1023. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @Teddy1023，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请务必提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。