👑 [需求]pro-table 需求重置表单的initialValues

[sunkaigoon]

🥰 需求描述

页面A 内使用pro-table显示数据，当使用查询表单筛选了数据之后，点击table里的数据跳转到页面B，当返回页面A后需要显示原先的数据。这时先将页面A的筛选条件filter，页码current，长度pageSize储存起来，返回页面A时，将filter放入form的initialValues中，current和pageSize设置为pagination的初始参数，可以达到显示原先数据的目的。问题在于，当点击表单的reset按钮时，无法重置到空状态，这是设置了初始值得原因，但不符合使用的场景。

我尝试在onReset方法中使用setState(维护一个initialValues，初始值为储存的filter)重置initialValues为{}，这种办法需要点击两次reset按钮才能达到置空的目的，第一次设置initialValues为{}，第二次将表单置为{}状态（置空）

🧐 解决方案

能否提供一个api，强制将表单置空并刷新table

🚑 其他信息

页面A筛选数据 页面B 返回页面A 点击两次重置按钮后

一下部分代码：

或者是不是有其它的方法解决这个问题

[fangniu]

同求

[infnan]

供参考：https://github.com/ant-design/pro-table/issues/126#issuecomment-672664804 不要在columns或form中设置initialValues，而是在useEffect中setInitialValues。不过分页的逻辑还是不好看。

[l745230]

我也遇到了这个需求..

最后选择使用link打开一个新页面查看详情页. antdPro里实现不了tab页,干脆用上浏览器的tab页. 综合体验下来,用户能接收. 反馈过来比单页中跳转详情页,再返回列表 操作更简单,体验也好.

[l745230]

除了记录表单的查询参数, 还要记录当前列表的滚动条高度, 点返回的时候,回到上次页面的状态. 尝试过倒也能实现,但是写起来麻烦,封装的自定义组件的功力不够,最后放弃了.

[linxianxi]

我想到一个办法，将 initialValues 存在 state 中，在 request 中清空 initialValues。点击重置就是清空状态了！

[chenshuai2144]

@linxianxi 你的方法是正解，initialValues 只在组件没有初始化的时候生效

[Liu123233]

我的方法是当点击重置的时候,手动将对应的文本框设置为空

[winwangqi]

@linxianxi 你的方法是正解，initialValues 只在组件没有初始化的时候生效

请问正解应该怎么做？

[chenshuai2144]

initialValues && <组件/>

[darknessjs]

这居然没有标准方案而是各种hack...

[soulcm]

所以现在有解决方案了没，我现在有个下拉框，想要的初始值可能是异步请求回来的（若有，则置为disabled），若setFieldsValue设置值之后，点击重置按钮，这个框就被置空了

[jiangxiaoqiang]

我根据这个答案来处理的： https://stackoverflow.com/questions/71523100/how-to-refresh-the-antd-pro-proformtext-initialvalue

[lcc908]

我根据这个答案来处理的：https://stackoverflow.com/questions/71523100/how-to-refresh-the-antd-pro-proformtext-initialvalue

有用，ProForm本身就是基于ant的from开发的，调用setFieldsValue来实现数据编辑回显

[ycshill]

牛！我想了好久，刷到你的解决办法，解决了！

[believeZJP]

// initialValue: initDate,

onReset={() => {
      setInitDate([]);
      // 通过这种方式解决有默认值的重置
      setTimeout(() => {
          actionRef.current.reset();
      }, 0);
  }}

用这种方式也可以重置默认值，再查询

[cdx111]

我用这个解决了保存搜索条件后无法重置的问题。

const formRef = useRef<ProFormInstance>(); const [params,setParams] = 外部数据 比如redux zustand之类的状态管理 useEffect(() => { formRef.current?.setFieldsValue({ ...params }); },[]);

<ProTable request={async (p)=>{ const pp = formRef.current?.getFieldsValue(); setParams({...p,...pp}) reqeust({...p,...pp}) }} 这是最完美的方案