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

Question

The use case

I am writing a piece of code searching for movies' deatils into the https://themoviedb.org

the code is written in React 17.0.2 using yarn, visual studio code.

The issue

I am calling a function, from a useEffect , that will generate a json file from the result of the call to TheMovieDB

I got the following error, could you help me? **Error: Invalid hook call. Hooks can only be called inside of the body of a function component. **

Thank you in advance for the time you will invest on this issue

useEffect in browser_movie_db.js

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

searchInTheMovieDB function in selection-filter-themoviedb.js

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;
}

GetSearch function in selection-filter-themoviedb.js

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 };
}

Error Invalid hook call.

Answer 1

the solution

I have increased the amount of useEffects to identify the process:

1. the * searchTerm changes
2. then, the web services is called
3. eventually, the slideRows variable is set with a new content

PS: I have created an async function fetching the data from the webservice

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