ProComponents——ProForm，设置初始值后，点击【重置】按钮，值已清除但页面未更新

我的问题
原因
解决方法

正文

回到顶部

我的问题

umi+antd，使用ProComponents的QueryFilter表单进行列表筛选，首页有个进入列表的快捷跳转，会筛选列表状态（在线1/离线0）。

设置筛选状态初始值为1后，点击【重置】按钮：

1.打印初始值1已清除，但页面上未更新，仍显示筛选在线状态

2.点击2次【重置】按钮，页面才会更新

3.点击下拉框的清除按钮，再点击【重置】按钮，初始值会又变为1

首页：

...
<Link to={'/list?status=1'}>列表</Link>
...

列表：

　import { useSearchParams } from '@umijs/max'

　...

const [params] = useSearchParams()

const status = params.get('status') ? Number(params.get('status')) : undefined

...

<FilterForm
    initStatus={status}
    onSubmit={e => {
        setSearchParams({
            ...searchParams,
            ...e,
        })
     }}
/>
...

筛选组件：

import { ProFormSelect, ProFormText, QueryFilter } from '@ant-design/pro-components'

export type FilterFormType = {
  name?: string
  status?: number
}
interface IFilterFormProps {
  initStatus?: number
  onSubmit?: (e: FilterFormType) => void
  onReset?: VoidFunction
}

export default function FilterForm(props: IFilterFormProps) {
  const { initStatus, onSubmit, onReset } = props

  return (
    <QueryFilter<FilterFormType>
      onFinish={async values => {
        onSubmit?.(values)
      }}
      onReset={onReset}
      initialValues={{ status: initStatus }}
      omitNil={false} // 默认为true，会自动清空 null 和 undefined 的数据。解决手动清除下拉框后，查询参数里下拉选项仍存在问题
    >
      <ProFormText name='name' label='名称' placeholder='名称' />
      <ProFormSelect
        name='status'
        label='状态'
        options={[
          { label: '离线', value: 0 },
          { label: '在线', value: 1 },
        ]}
      />
    </QueryFilter>
  )
}

回到顶部

原因

官网说明：https://ant.design/components/form-cn

回到顶部

解决方法

使用formRef、setFieldValue和resetFields

import {
  ProFormInstance,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components'
import { useEffect, useRef } from 'react'

export type FilterFormType = {
  name?: string
  status?: number
}
interface IFilterFormProps {
  initStatus?: number
  onSubmit?: (e: FilterFormType) => void
  onReset?: VoidFunction
}

export default function FilterForm(props: IFilterFormProps) {
  const { initStatus, onSubmit, onReset } = props
  const formRef = useRef<ProFormInstance>()

  useEffect(() => {
    formRef.current?.setFieldValue('status', initStatus)
  }, [])

  return (
    <QueryFilter<FilterFormType>
      formRef={formRef}
      onFinish={async values => {
        onSubmit?.(values)
      }}
      onReset={() => {
        onReset?.()
        formRef.current?.resetFields() // 解决重置后，页面上初始化值未清空问题
      }}
      labelWidth='auto'
      omitNil={false} // 默认为true，会自动清空 null 和 undefined 的数据。解决手动清除下拉框后，查询参数里下拉选项仍存在问题
    >
      <ProFormText name='name' label='名称' placeholder='名称' />
      <ProFormSelect
        name='status'
        label='状态'
        options={[
          { label: '离线', value: 0 },
          { label: '在线', value: 1 },
        ]}
      />
    </QueryFilter>
  )
}