useEffect not firing on search-CodePudding

I have an App where the user types in a given year, the app then makes an axios.get request to an API to fetch a list of movies that were released on that given year

For some reason, the useEffect hook just isn't working at all, and I don't know where to look for the error:

here is the code:

import React, {useState, useEffect }  from "react";
import "./index.css";
import axios from 'axios'

function MovieList() {

  const [keywords, setKeywords] = useState(0)
  const [fetchedData, setFetchedData] = useState('')

  console.log(keywords)

  
console.log(fetchedData)
  const fetchData = () => {
    const { data } = axios.get(
      `https://jsonmock.hackerrank.com/api/moviesdata?Year=${keywords}`
    )
    setFetchedData(data)
  }

  useEffect(() => {
    fetchData()
  }, [])

  const onSubmit = (e) => {
e.preventDefault()
fetchedData()
}
  
  return (
    <div className="layout-column align-items-center mt-50">
      <section className="layout-row align-items-center justify-content-center">
        <input type="number" value={keywords} className="large" onChange={e => setKeywords(e.target.value)} placeholder="Enter Year eg 2015" data-testid="app-input"/>
        <button className="" onSubmit={onSubmit} data-testid="submit-button">Search</button>
      </section>

      <ul className="mt-50 styled" data-testid="movieList">
        <li className="slide-up-fade-in py-10">{data.title}</li>
      </ul>

      <div className="mt-50 slide-up-fade-in" data-testid="no-result"></div>
    </div>
  );
}

export default MovieList

CodePudding user response：

If you want to fetch the data only when the button is clicked then you need to make following changes:

const fetchData = async() => {
 const {data} = await axios.get(
  `https://jsonmock.hackerrank.com/api/moviesdata?Year=${keywords}`
 )
 setFetchedData(data.data)
}

remove the useEffect you have.

If you want to fetch the data every time user types something then

const fetchData = async() => {
 const {data} = await axios.get(
  `https://jsonmock.hackerrank.com/api/moviesdata?Year=${keywords}`
 )
 setFetchedData(data.data)
}

useEffect(() => {
  fetchData();
}, [keywords])

Here is a sandbox

CodePudding user response：

You can use an async function to await until the data is loaded. Like below:

  const fetchData = async()=>{
    const response = await axios.get(
      `https://jsonmock.hackerrank.com/api/moviesdata?Year=${keywords}`
    )
    setFetchedData(response.data)
  }

useEffect with dependency:

useEffect(()=>{
   fetchData();
}, [fetchData])

CodePudding user response：

use async await

const fetchData = async() => {
 const res = await axios.get(
  `https://jsonmock.hackerrank.com/api/moviesdata?Year=${keywords}`
 )
 setFetchedData(res.data)

CodePudding user response：

In your example, the useEffect hook will only run once, when the component is loaded. If you want it to run everytime keywords is changed, you'll need to pass it in the dependencies array like this:

useEffect(() => {
  fetchData();
}, [keywords])

Also as @Sachila said, you need to use async await.