记 ahooks 搭配 antd 的实践的重复调用的坑记 ahooks 搭配 antd 的实践的重复调用的坑。useRe

业务需求

需要监听用户输入的应用名，隔一段时间不输入后校验应用名

输入的入口有两个，一个是输入框输入，一个是列表上勾选的应用名默认填充

代码实现

export function useFilterAppList(params, visible = false, form) {
  // 保持引用稳定
  const _params = {
    ...params,
  };
  // 处理参数
  if (typeof params?.apps === 'string' && params?.apps) {
    _params.apps = onFormatComma(params?.apps, true);
  }

  const req = useRequest({ url: '/api/test', method: 'post', params: _params }, {
    refreshDeps: [params?.apps],
    ready: visible && params?.apps?.length > 0,
    debounceWait: 2000,
    onSuccess: async (res) => {
         // TODO 处理一些过滤逻辑
    }
  });
  return req;
}

const [form] = Form.useForm();
// 问题代码
const apps = Form.useWatch('apps', form) || [];

const req = useFilterAppList({ apps }, true, form)

问题出现

当 useRequest 请求之后，会使得页面重新渲染，不断的重新更改 apps 的引用地址，导致接口一直请求

解决问题

不需要给默认值，使用 form 实例接管引用

const apps = Form.useWatch('apps', form);