alibaba / hooks

A high-quality & reliable React Hooks library. https://ahooks.pages.dev/
https://ahooks.js.org/
MIT License
13.91k stars 2.69k forks source link

useAntdTable 的 refresh 函数能否支持传入pageIndex参数 #202

Closed hzyhbk closed 4 years ago

hzyhbk commented 4 years ago

项目中用到自己写的筛选组件,并没有用到 useAntdTable 提供的和form联动的筛选,改变筛选条件之后要重新刷新列表数据,我给搜索按钮绑定的是 refresh 函数,这就会导致比如我在切换到分页 2 的时候再点击搜索按钮的话,传的 pageIndex 参数为2,导致接口返回的数据为空。所以我第一个想到的解决办法就是refresh支持传入 pageIndex 参数,那样我只要传个 1 就好了。但是好像目前 refresh 并不支持。

其实这个小问题影响倒也不大,但是出于强迫症,想改掉这个问题,于是只能把搜索改成了跟form联动的形式,改的过程中却不是很顺利。

我的 useAntdTable 是这么写的,也是可以正常使用的

const { tableProps, refresh } = useAntdTable(getTableData);

但是当我加上 form 之后

const { tableProps, refresh } = useAntdTable(getTableData,{ form: props.form });

返回的 tablePropsdataSource 为空了,但是接口是有返回数据的,我看了很久没找到原因,然后尝试给useAntdTable加了个空deps,然后就好了。🤔🤔🤔

const { tableProps, refresh } = useAntdTable(getTableData, [], { form: props.form });

第二个问题是我的 FormItem 有一项用的是函数式组件,但是 form.getFieldValue 返回的值却唯独没有这一项,看了 useAntdTable 源码之后才发现是因为源码里用了 form.getFieldInstance校验,而我的组件虽然用React.forwardRef包裹了但是没有把ref参数传给组件。

所以我就想 refresh 函数能否支持传入 pageIndex 的参数呢?

brickspert commented 4 years ago
  1. 你可以参考下 这个例子,deps 变化的时候,会重置 pageIndex = 1。

点击搜索按钮后,可以触发某个 state 变化,这个 state 放在 deps 里面就行。

  1. 其他问题我来修复下。

  2. 关于 refresh 接收参数的能力,我们目前正在支持。后面会用 @umijs/use-api 代替目前所有的异步请求,包括 useAntdTable,在新的 hooks 中,可以通过 run 直接修改参数。

hzyhbk commented 4 years ago

确实,我应该把筛选项作为 deps 传给 useAntdTable 的,这样做才是遵循 hooks 的依赖诚实规则。第一次在项目中用 useAntdTable,还不是很熟悉😰, @brickspert 感谢大佬提供思路。

hzyhbk commented 4 years ago

@brickspert 上面说的返回的 dataSource 为空,我找到原因了。其实是我自己对 useAntdTable 又封装了一层,第二个参数传的是deps,第三个参数才是options,我用的时候又忘记了 useAntdTable 是自己封装过的,所以在第二个参数里传了options,其实是无效的。不是 umi 的 useAntdTable 的问题,抱歉了,犯了很愚蠢的错。