Как получить данные из API, когда внутри JSON есть серверные массивы с помощью React

Похоже, у какого-то элемента нет атрибута instruments. Возможно, вы захотите проверить это перед тем, как перебирать атрибут instruments.

const AstronomyPic = () => {
  const [images, setImages] = useState([]);

  return (
    <div>
    {
      images.map((image) => (
        <>
          <p>...some other attributes</p>
          { image.instruments && <>
            instruments attribute is defined, loop through instruments here
          </>}
          <p>...some other attributes</p>
        </>
      )
    }
    </div>
  );
}

Кажется, инструменты имеются не во всех элементах. Вы можете избежать любого исключения нулевой ссылки, используя необязательный оператор цепочки. См. код ниже:

import React from 'react'
import { useState, useEffect } from 'react'
import axios from 'axios';


const AstronomyPic = () => {
    const [images, setImages] = useState([])

    useEffect(() => {
        axios.get('https://api.nasa.gov/DONKI/CME?startDate=yyyy-MM-dd&endDate=yyyy-MM-dd&api_key=DEMO_KEY')
          .then(response => setImages (response.data)).
    catch(error =>console.error(" Error fetchin users", error)); 
      }, []);
  return (
    <div>

        <h1 className = "text-center mt-5">Astronomy</h1>
        <ol>
        {images?.map((image) => (
        <div><li>
          <p>{image.activityID}</p>
          <p>{image.catalog}</p>
          <p>{image.startTime}</p>
          <p>{image.sourceLocation}</p>
          <p>{image.activeRegionNum}</p>
          <p>{image.link}</p>
          <p>{image.note}</p>
          <p>Items: {image?.items?.map((item) => (
            <p>{item?.instruments}</p> // Use Optional chaining after item
          ))}</p>
          </li>
         
        </div>
         
      ))}
      </ol>
      

</div>

)

}

export default AstronomyPic