Ant Design Pro ProFormSelect Reset 时下拉菜单使用缓存禁止发起网络请求

场景

ProFormSelect的下拉菜单是从网络请求中读取的。

当ProFormSelect被外层QueryFilter的Reset操作影响时，会重新发起网络请求。

因为是字典数据，很少发生变化，请求过一次之后不需要频繁更新，下次刷新页面再更新也没有很大影响。

代码

使用React.useState缓存下拉菜单数据。在request判断是否已经有options了，没有则再次发起请求。

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>
}