将函数转换为使用回调答案

【问题标题】：Transform function to useCallback将函数转换为使用回调
【发布时间】：2021-01-13 15:37:10
【问题描述】：

我想重写一个函数，比如：

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

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

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

我得到的错误：

无法在回调中调用 React Hook “useLocation”。反应 Hooks 必须在 React 函数组件或自定义 React 中调用钩子函数 react-hooks/rules-of-hooks

这是否意味着我无法将我的函数转换为useCallback？

【问题讨论】：

标签： reactjs usecallback

【解决方案1】：

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

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]
);

【讨论】：