React 17：错误：无效的钩子调用。 Hooks 只能在函数组件的主体内部调用

Question

用例

我正在写一段代码搜索电影的细节到https://themoviedb.org

代码是在 React 17.0.2 中使用 yarn、visual studio 代码编写的。

问题

我正在从 useEffect 调用一个函数，它将根据调用 TheMovieDB 的结果生成一个 json 文件

我收到以下错误，您能帮帮我吗？ **错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。 **

提前感谢您在此问题上投入的时间

browser_movie_db.js 中的useEffect

 useEffect(() => {
    if (slideRows.length > 0 && searchTerm.length > 2) {
      const searchResult = searchInTheMovieDB(category, searchTerm);
      if (searchResult.results.length > 0) {
        setSlideRows(searchResult);
      } else {
        setSlideRows(slides[category]);
      }
    } else {
      setSlideRows(slides[category]);
      console.log("slideRows", slideRows);
    setSlideRows(slides[category]);
  }, [category, searchTerm, slideRows, slides, theMovieDBApikey]);
    }

selection-filter-themoviedb.js 中的 searchInTheMovieDB 函数

export function searchInTheMovieDB(media_type, query) {
  let result = {};
  if (media_type === "tv") {
    result = {
      tv: [
        {
          title: `${media_type} search result`,
          data: GetSearch(media_type, query),
        },
      ],
    };
  } else {
    result = {
      movie: [
        {
          title: `${media_type} search result`,
          data: GetSearch(media_type, query),
        },
      ],
    };
  }
  return result;
}

selection-filter-themoviedb.js 中的 GetSearch 函数

export function GetSearch(media_type, query) {
  const [content, setContent] = useState([]);
  useEffect(() => {

    console.log("GetSearch", `${endpoint.Search}/${media_type}?query=${query}`);
    api
      .get(`${endpoint.Search}/${media_type}`, {
        params: {
          api_key,
          query,
        },
      })
      .then((res) => {
        setContent(res.data.results);
      })
      .catch((error) => {
        console.error("error.message", error.message);
      });
  }, [media_type, query]);
  return { [media_type]: content };
}

错误 无效的钩子调用。

Answer 1

解决方案

我增加了useEffects的数量来识别进程：

1. *searchTerm 发生变化
2. 然后，调用 Web 服务
3. 最终，slideRows 变量设置了新内容

PS：我创建了一个 async 函数从 web 服务获取数据

    const [searchResults, setSearchResults] = useState([]);

    import axios from "axios";
    const api = axios.create({ baseURL: BASE_URL });

    async function getSearch(media_type, query) {
    api
      .get(`${endpoint.Search}/${media_type}`, {
        params: {
          api_key,
          query,
        },
      })
      .then((res) => {
        setSearchResults(res.data.results);
      })
      .catch((error) => {
        console.error("error.message", error.message);
      });

  }

  useEffect(() => {
    if (searchResults.length > 0) {
      setSlideRows({
        tv: [
          {
            title: `${category} search result`,
            data: searchResults,
          },
        ],
      });
    }
  }, [category, searchResults]);

  useEffect(() => {
    if (slideRows.length > 0 && searchTerm.length > 2) {
      getSearch(category, searchTerm);
    } else {
      setSlideRows(slides[category]);
    }
  }, [searchTerm, slides]);

  useEffect(() => {
    if (searchResults.length > 0 && searchResults.results?.length > 0) {
      setSlideRows(searchResults);
    } else {
      setSlideRows(slides[category]);
    }

    setSlideRows(slides[category]);
  }, [searchResults]);