Question

这是我的代码

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 Hook“ useCategory”。 React Hooks必须在React函数组件或自定义的React Hook函数中调用react-hooks / rules-of-hooks 第20行：无法在回调内部调用React Hook“ useCategory”。必须在React函数组件中或自定义的React Hook函数中调用React Hooks。react-hooks / rules-of-hooks

Answer 1

问题取决于您是否将钩子置于条件之内。

根据文档，您应该执行以下操作：

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

在创建具有内部条件的效果时。请记住，必须在组件的顶层调用Hook。

您可以详细了解here

Answer 2

您不应使用useCategory设置您的category状态，它会被react作为其钩子检测到。将其重命名为setCategory将解决您的问题

无法在回调内部调用React Hook“ useCategory”

2 个答案: