Блог

Я хочу переписать функцию, например:

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

чтобы предпочесть useCallback форму Реакции, мое лучшее предположение было:

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

Ошибка, которую я получил:

Хук реакции «useLocation» не может быть вызван внутри обратного вызова. Перехваты реакции должны вызываться в компоненте функции реакции или пользовательской функции перехвата реакции react-hooks / rules-of-hooks

Означает ли это, что я не могу преобразовать свою функцию в useCallback ?

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