JSON对象即使存在也返回未定义状态（NASA API和React）

Question

{this.imageRenderer(item.data[0].media_type, item.links[1], item.links[0])}

When I am referencing item.links it says it is undefined, but it is right there!! (I am getting data from NASA API) Image:

As you can see there is the links attribute. I am confused to why this is happening. Console errors:

TypeError: "item.links is undefined"

render AstronomyContainer.js:127 render AstronomyContainer.js:119 finishClassComponent13React
handleSubmit AstronomyContainer.js:28 

failed to fetch data AstronomyContainer.js:40
TypeError: item.links is undefined[Learn More] AstronomyContainer.js:127

​For some odd reason this same API call works when I type in the keyword 'Sun':

If you want to check out the whole website it is here: https://nasaopenimagelibrarysearch.firebaseapp.com/

If you type in 'Hi' suppose, it is supposed to display multiple results like when it does when I type in 'Sun' (You can also try this). But the image property(item.links) becomes undefined like shown above.

Do not forget to check the function down below for imageRenderer. It really helps explain a lot.

Image that item.links exists: Json image What's even more odd is that the data attribute populates the "cards" when I comment out the item.links attribute.

UPDATE:

I ran a console.log for the links when I type in 'Hi' and it gets the links for displaying the image. The only problem is, is that it is still returning undefined even though it gets the links.

Image: Image for getting the links

Function for this.imageRenderer

imageRenderer(stuff, stuff1, stuff2) {
    switch(stuff) {

       case('video'):
           return (
               <iframe
                   allowFullScreen
               frameBorder="0"
               height="520"
               width="720"
               src={stuff1.href}>
           </iframe>
           )

           case('image'):
               return (
               //   <a href={hdurl} className="astronomy-image-wrapper">
               //           <img src={url} alt={title} />
               //   </a> 
               <a className="astronomy-image-wrapper">
                   <img src={stuff2.href}/>
               </a>
               )

           default:
           return(<a className="astronomy-image-wrapper">
           {/* <img src={stuff1.href} /> */}
       </a>)
   }
}

Answer 1

I have gone through JSON output of this URL

I think the problem is in this line

{this.imageRenderer(item.data[0].media_type, item.links[1], item.links[0])}

You are trying to get links at index 0 and 1

Now when I inspect JSON for the link, not all Items have 2 links in it. So you will get an error if you try links[1]

Here is a fiddle which prints links length in the console