Getting API with useEffect, inside a handle change function-CodePudding

I'm using the YTS API and I need to change the link for the call, I have to use ?query_term= and add the text that the user is typing, for autocomplete. I'm using mantine components for the autocomplete. I tried putting the call inside the handlechange function, but this is not possible.

const [movieNames, setMovieNames] = useState([])

const onChangeHandler = (text) => {
    useEffect(() => {
        const loadMovieNames = async () => {
            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)
        }
        loadMovieNames()
    }, [])
}

<Autocomplete
         placeholder="Search Movie"
         limit={8}
         data={movieNames}
         onChange={e => onChangeHandler(e.target.value)}
/>

CodePudding user response：

You MUST use hooks in the execution context of Function Component, you used the useEffect inside a function not in the execution context of Function Component.

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={(e) => loadMovieNames(e.target.value)}
    />
  );
};

CodePudding user response：

useEffect is a hook, which executes on state change, So keep the useEffect funtion outside the onChangeHandler and add a new state for 'query param' and setQueryState(text) inside the onChangeHandler, and put the state param as dependency in useEffect, So whenever this state gets changed this will call the use effect function automatically.

CodePudding user response：

Just Try it without useEffect()