reactjs - Reactフック「useCategory」はコールバックの中で呼び出すことはできません

こちらが私のコードです

import React, { FC, useState,useMemo } from "react";

const FormSearch: FC<{ params: string }> = ({
   params 
}) => {
  const [category, useCategory] = useState<string>("All");
  const [search, setSearch] = useState<string>("");
  useMemo(() => {             
     const searchParams = new URLSearchParams(params);
    if (!!searchParams.get("Categories")&&!!searchParams.get("Search")) {
          useCategory(`${searchParams.get("Categories")}`); 
          setSearch(`${searchParams.get("Search")}`);   
    } else {
      setSearch("");
      useCategory("All")
    }
  }, [params]);

  return (
    <div>1000</div>
  );
};

これらのエラーが出ます

16行目: Reactフック "useCategory" はコールバック内で呼び出すことはできません。ReactフックはReact関数コンポーネントまたはカスタムReactフック関数内で呼び出す必要があります react-hooks/rules-of-hooks 20行目: Reactフック "useCategory" はコールバック内で呼び出すことはできません。ReactフックはReact関数コンポーネントまたはカスタムReactフック関数内で呼び出す必要があります react-hooks/rules-of-hooks

回答 #1

あなたは category ステートを設定するために useCategory を使うべきではありません。React によってフックとして検出されます。これを setCategory に名前を変更すると問題が解決します。

回答 #2

問題は、あなたがフックを条件の中に置いていることにあります。

ドキュメントによると、あなたは次のようなことをするべきです：

  useEffect(function persistForm() {
    // 👍 We're not breaking the first rule anymore
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

あなたが条件を内部に持つエフェクトを作成している場合、フックはコンポーネントのトップレベルで呼び出されなければならないことを覚えておいてください。

ここでそれについてもっと読むことができます