React.js - 无法访问对象数组中元素的值

Question

I feel like a lousy developper coming to you with that question but I'm going in circles.

I'm using React/JS and here's the problem :

The code imports an array of objects from my personnal API via ajax (axios) .
My state expect an array : const [ films, setFilms ] = useState([]); and receives one.

Indeed, the response.result from my API is an array of 20 movie objects :

I just want to pass it as props to another component in which I'm gonna use one of the object stored in the array to use and display its values but I've been unable to do so...so far.

Now, in React, when I test to call one movie like this :
console.log("films", films); => WORKS (shows screen capture above) ,
console.log("film", films[0]); => WORKS (shows first element, an object) ,

But if I try to enter it (any properties) :
console.log("film", films[0].id); OR console.log("film", films[0]["id"]);
=> FAILS : TypeError: films[0] is undefined !

I know I'm missing something. I receive an array of object, can enter an element but can't read its properties...

I feel lost... Help ? :)
Thank you

Answer 1

尝试像这样使用&&运算符：

console.log("film", films[0] && films[0].id);

Answer 2

Probably your console.log("films", films); method is called a couple of times even films are not loaded yet. When you try to log films it will first log null or an empty array, but then it will show the correct list. On the other hand, when you have console.log("film", films[0].id); , your app will crash because it was called while films array is null or empty.

So make sure that your film array length is greater than 0 before logging.