Not able to see output, when reload the page. Output come just for a sec, then coming map error-CodePudding

Above code outputs basic Netflix movie name and images. Output comes just for a sec, then some error is coming on console related with maps, however it seems fine to be. what is the error here? I used ReactJS here with useeffect hook, tried it for netflix clone




  const baseURL="https://image.tmdb.org/t/p/original/"
  const [movies, setMovies] = useState([])


  useEffect(() => {

    async function fetchData(){
      const request = await axios.get(fetchUrl);
      setMovies(request.data.results);
      return request
    }

  fetchData()
   
  }, [fetchUrl])
  console.log(movies);
 

  return (
    <div className='row'>
      <h2> {title} </h2>
          

      {movies.map ((movie) => (
     <img src={`${baseURL}${movie.poster_path}`} alt={movie.name}/>
      ))}
   
</div>

)}

-----------requests.js-----------

const API_KEY ="ecfc81ae98ad1c0720b07e83400de828";

const requests = {
    fetchTrending : `/trending/all/week?api_key=${API_KEY}&language=en-US`,
     fetchNetflixOriginals : `discover/tv?api_key=${API_KEY}&with_networks=213`
}

-------axios.js-------

[enter image description here][1]
const instance = axios.create({
    baseURL : "https://api.themoviedb.org/3",
});

----app.js------

function App() {
  return (
    <div ClassName="App">
     
    <h1> Hey !! lets build Netflix</h1> 
    <Row title="Netflix Originals" fetchUrl={requests.netflixOriginals}/>
    <Row title="Trending" fetchUrl ={requests.fetchTrending}/>
    </div>
  );
}

CodePudding user response：

Apparently, request.data.results is not an array. And when you assign it to movies, the JSX trying to loop through the array errors.

Most likely, the movies are request.data itself, so the first thing I'd try would be replacing setMovies(request.data.results) with setMovies(request.data).

In fact, I'd simplify the whole useEffect to:

useEffect(() => {
  axios.get(fetchUrl).then(({ data }) => setMovies(data))
}, [fetchUrl])

If that doesn't work, you should log the response:

useEffect(() => {
  axios.get(fetchUrl).then(r => {
    console.log(r.data)
  })
})

, at which point you should be able to figure out what you need to assign to movies. So far, we know for sure it's not r.data.results

CodePudding user response：

try this

{movies && movies.map ((movie) => ( <img src={${baseURL}${movie.poster_path}} alt={movie.name}/> ))}