DEBE usar ganchos en el contexto de ejecución del Componente de función, usó useEffect dentro de una función que no está en el contexto de ejecución del Componente de función.

 const YourComponent = () => { const [movieNames, setMovieNames] = useState([]); const loadMovieNames = async (text) => { const response = await axios.get( 'https://yts.mx/api/v2/list_movies.json?query_term=' + text ); let arrayOfMoviesNames = []; response.data.data.movies.forEach((i) => { arrayOfMoviesNames.push(i.title); }); setMovieNames(arrayOfMoviesNames); }; return ( <Autocomplete placeholder="Search Movie" limit={8} data={movieNames} onChange={(value) => loadMovieNames(value)} /> ); };

También es posible sin useEffect , por lo que sin complicarlo tanto usando useEffect y onChangeHandler , solo use la función onChangeHandler para actualizar los movieNames y actualizará automáticamente los textos DOM (quiero decir, donde sea que use) ...

 import React, { useState } from "react"; function MoviesPage(props) { const [ movieNames, setMovieNames ] = useState([]); const [ searchValue, setSearchValue ] = useState(""); const onChangeHandler = async (text) => { const response = await axios.get( 'https://yts.mx/api/v2/list_movies.json?query_term=' + text ); let arrayOfMoviesNames = []; response.data.data.movies.forEach(i => { arrayOfMoviesNames.push(i.title) }); setMovieNames(arrayOfMoviesNames); } return ( <div> <Autocomplete placeholder="Search Movie" limit={8} data={movieNames} onChange={(e) => onChangeHandler(e.target.value)} /> </div> ); } export default MoviesPage;

... y solo para aclarar, puede usar useEffect en el caso de la API si desea inicializar la página con los datos de la API. Puede usar este enlace si no tiene ningún controlador onChange . Otra forma de acercarse es actualizar un enlace de estado (como searchData ) en el cambio de la barra de búsqueda y, por último, agregar la variable searchData a la matriz de dependencia useEffect :

 useEffect(() => { // use the searchData variable to populate or update the page // ... }, [ searchData, // <-- talking about this line ]);

Entonces, esta fue mi solución. ¡Espero que esto te ayude compañero!

useEffect es un enlace, que se ejecuta en el cambio de estado, así que mantenga la función useEffect fuera de onChangeHandler y agregue un nuevo estado para 'query param' y setQueryState(text) dentro de onChangeHandler, y coloque el parámetro de estado como dependencia en useEffect, así que siempre que este estado se cambia, esto llamará a la función de efecto de uso automáticamente.