reactjs - 将函数转换为使用回调

Question

我想重写一个函数，如：

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

对于 ReactuseCallback形式的首选，我最好的猜测是：

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

我得到的错误：

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

这是否意味着我不能将我的功能转换为useCallback？

Answer 1

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

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

尽管 sincelocation是一个对象并且您实际上只关心该search值，但仅使用简单值进行比较以确定useCallback挂钩的更改可能更准确：

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