ProTable异步设置默认值查询

开发过程中遇到如下场景：筛选中某一下拉需要设置默认值进行搜索

实现思路

通过ProTable form中的initialValues属性设置可以达成效果，且每次重置也会设置上默认值；

实现过程

初步尝试

遂进行尝试，由于下拉ProFormSelect绑定的options来源自接口获取

const list = useFinancialInstitutionsList();

所以此处初始值也赋值成list中对应的对象

list.filter((it) => it.institutionNo === 'FI0007'); // 默认值匹配条件

// 此时ProTable设置
<ProTable
    form={formRef}
    form={{
      initialValues: list.filter((it) => it.institutionNo === 'FI0007'),
    }}
/>

此处由于list是调接口异步获取的，在ProTable获取表格数据时list还没有值，所以设置不成功

问题解决

于是想到利用useEffect来设置initialValues

const [initialValues, setInitialValues] = useState({});
const list = useFinancialInstitutionsList();
useEffect(() => {
// 在列表数据加载完成后设置默认值
const defaultValues = list.filter((it) => it.institutionNo === 'FI0007');
if (defaultValues.length > 0) {
  setInitialValues({ fiNo: defaultValues });
  // 手动更新表单的值
  formRef.current?.setFieldsValue({ fiNo: defaultValues });
  formRef.current?.submit(); // 此处不可用actionRef.current?.reload()
}
}, [list]); // 依赖于 list 变化

注意此处更新表格数据不可用actionRef.current?.reload()，这个只针对表格数据的渲染，不会带上更新的表单默认值，改用formRef.current?.submit()实现查询更新；

优化

此处还可以优化一下接口调用，避免每次加载调用两次分页接口 利用manualRequest属性组织首次自动请求

const [initialValues, setInitialValues] = useState({});
const [requestReady, setRequestReady] = useState(false); // 控制是否请求数据
const list = useFinancialInstitutionsList();
useEffect(() => {
// 在列表数据加载完成后设置默认值
const defaultValues = list.filter((it) => it.institutionNo === 'FI0007');
if (defaultValues.length > 0) {
  setInitialValues({ fiNo: defaultValues });
  // 手动更新表单的值
  formRef.current?.setFieldsValue({ fiNo: defaultValues });
  setRequestReady(true); // 控制允许请求数据
  formRef.current?.submit();
}
}, [list]); // 依赖于 list 变化

<ProTable
    form={formRef}
    form={{
      initialValues: initialValues,
    }}
    manualRequest={!requestReady} // 阻止首次自动请求，等到准备好再请求
/>