将函数转换为useCallback

Question

我想重写一个函数，如：

function useQuery() {
  return new URLSearchParams(useLocation().search);
}

对于React useCallback表单，我的最佳猜测是：

const useQuery = useCallback(
  () => {
    return new URLSearchParams(useLocation().search);
  },
  [useLocation]
);

我所犯的错误：

React "useLocation“不能在回调中调用。必须在React函数组件或自定义React函数React /rules of Hooks中调用react。

这是否意味着我不能将我的函数转换为useCallback

Answer 1

useLocation是一个钩子，应该在组件中直接调用。但是，它的结果可以用于回调。例如：

const location = useLocation();
const useQuery = useCallback(
    () => {
        return new URLSearchParams(location.search);
    },
    [location]
);

虽然location是一个对象，而且您实际上只关心search值，但是通过简单的值来比较确定useCallback钩子的变化可能更准确：

const { search } = useLocation();
const useQuery = useCallback(
    () => {
        return new URLSearchParams(search);
    },
    [search]
);