Ant Design Pro ProFormSelect 懒加载下拉菜单

场景

ProFormSelect的下拉菜单是从渲染开始就发起网络请求。

需改为懒加载，当点击了ProFormSelect弹出下拉框时才开始请求数据。

代码

使用fieldProps下的onOpenChange回调，定义受控参数params。在onOpenChange中更新字段，让组件自动发起request。

const MyComponent = () => {

  const [options, setOptions] = useState();
  const [params, setParams] = useState<{openedAt?: Date}>()

  return <PageContainer>
      <QueryFilter
        layout="vertical"
        autoFocusFirstInput={false}
        onFinish={formData => {
        }}
        onReset={formData => {
        }}
      >
        <ProFormSelect
          name="myData"
          label="My Data"
          showSearch
          params={params}
          request={async (params) => {
            console.log("select request", params);
            if (options || !params.openedAt) return options;
            const res = await request("/api/menu/options");
            if (res.code !== 0) return options;
            const opts = res.data.map((item: any) => ({
              label: item,
              value: item,
            }));
            setOptions(opts);
            return opts;
          }}
          fieldProps={{
            fetchDataOnSearch: false,
            onOpenChange: visible => {
              if (visible) {
                setParams(prev => ({...prev, openedAt: new Date}))
              }
            },
          }}
        />
        
      </QueryFilter>

  </PageContainer>
}