javascript - Uncaught TypeError: Cannot read properties of undefined (array) - Stack Overflow

admin管理员组

文章数量:1401941

I have this async function that is fetching data from the API but when I use the data it gets a type error of undefined with movies array. But then I use "&&" to tell it that if it's empty then don't execute the block but it still gives the error. I have done it by the ternary operator too but still the same.

Here is the use effect hook which is fetching data from API

const [movies, setMovies] = useState([])
useEffect(() => {

   async function fetchData() {

     const request = await axios.get(fetchUrl);
     setMovies(request.data.results);
     console.log(movies);
     return request;
   }

   fetchData();
}, [fetchUrl]);

And here is the code for that element

{movies &&
    <div id="film-row">
      <FilmCard img={`${base_url}${movies[0].poster_path}`} />
      <FilmCard img={`${base_url}${movies[1].poster_path}`} />
      <FilmCard img={`${base_url}${movies[2].poster_path}`} />
      <FilmCard img={`${base_url}${movies[3].poster_path}`} />
      <FilmCard img={`${base_url}${movies[4].poster_path}`} />
      <FilmCard img={`${base_url}${movies[5].poster_path}`} />
    </div>
}

I have this async function that is fetching data from the API but when I use the data it gets a type error of undefined with movies array. But then I use "&&" to tell it that if it's empty then don't execute the block but it still gives the error. I have done it by the ternary operator too but still the same.

Here is the use effect hook which is fetching data from API

const [movies, setMovies] = useState([])
useEffect(() => {

   async function fetchData() {

     const request = await axios.get(fetchUrl);
     setMovies(request.data.results);
     console.log(movies);
     return request;
   }

   fetchData();
}, [fetchUrl]);

And here is the code for that element

{movies &&
    <div id="film-row">
      <FilmCard img={`${base_url}${movies[0].poster_path}`} />
      <FilmCard img={`${base_url}${movies[1].poster_path}`} />
      <FilmCard img={`${base_url}${movies[2].poster_path}`} />
      <FilmCard img={`${base_url}${movies[3].poster_path}`} />
      <FilmCard img={`${base_url}${movies[4].poster_path}`} />
      <FilmCard img={`${base_url}${movies[5].poster_path}`} />
    </div>
}

• javascript
• reactjs
• async-await
• jsx

Share Improve this question Follow edited Feb 9, 2023 at 0:53 Roohullah Kazmi asked Feb 15, 2022 at 18:04 Roohullah KazmiRoohullah Kazmi 33333 silver badges1414 bronze badges 2

• 1 As an aside, I'd really remend using Array.map() to build up your ponents rather than hard-coding the indices like that. See reactjs/docs/… – Serlite Commented Feb 15, 2022 at 18:20
• This is just for testing. I will use .map for sure. thanks – Roohullah Kazmi Commented Feb 15, 2022 at 18:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

add a ? to your tags like this

  <FilmCard img={`${base_url}${movies?.[0]?.poster_path}`} />

or change your conditional rendering to :

{movies.length &&

It can be tough to remember what values are coerced to true or false by JavaScript. In this case, an empty array ([]) is actually a "truthy" value (see MDN for examples), so your FilmCard elements will be rendered unwantedly.

Either change your conditional to account for this:

{movies.length &&

Or initialize movies as a "falsy" value:

const [movies, setMovies] = useState(null)

I do fetch data like this:

useEffect(()=>{
  (async () => {
    const request = await axios.get(fetchUrl);
     setMovies(request.data.results); 
  })()
},[fetchUrl])

And you should check if movies is not null. in the return add

{movies.length > 0 && // What you want to do with movies.}

The object is being read before the response. Why use async await when you can use "then."

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

More on the subject here: https://axios-http./docs/api_intro

本文标签： javascriptUncaught TypeError Cannot read properties of undefined (array)Stack Overflow