sync url state 同步搜索状态到地址栏

[ywzhaiqi]

我想同步搜索状态到 url，尝试了很久，都还是有 bug 用了 useUrlState

import useUrlState from '@ahooksjs/use-url-state';

从 url state 中设置搜索表单值

const [state, setState] = useUrlState({});
useEffect(() => {
    listRef.current.getSearchRef().setFieldsValue(state);
    listRef.current.getSearchRef().submit();
  }, [state]);

按 查询或重置 按钮，设置 url state

onParamsChange={(searchParams: AnyKeyProps) => {
    const { search } = searchParams;
    console.log("onParamsChange", search);
    // 设置 false，不存在的 都为 undefined
    const allKeys = Array.from(
      new Set([...Object.keys(state), ...Object.keys(search)])
    );
    allKeys.forEach((key) => {
      if (!(key in search) || !search[key]) {
        search[key] = undefined;
      }
    });
    setState(search);
  }}

codesandbox demo

这样写会碰到几个问题：

• 多次重复循环
• 第一次运行，onParamsChange 会先执行一次， submit 后，再执行一次

[viewweiwu]

多定义一个变量 firstRef，用来记录是不是页面第一次加载，如果是第一次再塞值，就在那个 useEffect 里面。 或许这样可以解决重复的问题