React component don't get the whole data-CodePudding

I'm trying to show a page in React that shows a grid of images. I get the data for the grid with a fetch to a file in a public subfolder.

export const GalleryGrid = () => {


const { galleries, loading } = useFetchGalleries()

return (
    <div>
        {loading && <div className="diving__loading flex-column">

            <div><Loader
                type="Puff"
                color="#264653ff"
                height={200}
                width={200}
            /></div>
            <div>
                <p>
                    Please Wait ...
                </p>
            </div>

        </div>}

        <div className="card-grid">
            <div className="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">

                {
                    galleries.map(gal => (
                        
                        <GalleryGridItem
                            key={gal.url}
                            {...gal}
                        />

                    ))
                }

            </div>
        </div>
    </div>
)
}

I use the function "useFetchGAlleries()" to get the data I neew for the grid. This function launch a helper, called "getGalleries", and return de data stored with useState

export const useFetchGalleries = () => {

const [ state, setState]  = useState({
    galleries: [],
    loading: true
});

useEffect(() => {

    getGalleries()
        .then( galleries => {

            setState({
                galleries,
                loading: false
            })

        })
        .catch( e => {
            console.log( e );
        });
  
}, [ ]);

return state;

}

The helper "getGalleries" uses a fetch to read the files that contain objects in json format, and transform them to an object:

export const getGalleries = async () => {

const galleries = await fetch(`./assets/data/galleries.txt`)
                    .then( res => {
                        return res.json();
                    })
                    .then( body => {
                        return body.galleries;
                    })
                    .catch( e => {
                        console.log( e );
                    });

// the .map check if the gallery have images or not
await galleries.map( gal => (

    gal.interactive ? fetch(`./assets/data/${gal.url}.txt`)
                        .then( res => {
                            return res.json();
                        })
                        .then( body => {
                            gal.images = body.images;
                        })
                        .catch( e => {
                            console.log( e );
                        })
                    : ""

));

return galleries ;       
        
}

In "GalleryGrid" I have all information about galleries I need. For example, the first gallery from the array is:

{
    "name": "Nuestros Fondos 2022",
    "url": "galeria_22_fishes",
    "number": 8,
    "interactive": true,
    "images": [
           {index: '01', url: 'galeria_03_cursos'},
           {index: '02', url: 'galeria_03_cursos'},
           {index: '03', url: 'galeria_03_cursos'},
           {index: '04', url: 'galeria_03_cursos'},
           {index: '05', url: 'galeria_03_cursos'},
           {index: '06', url: 'galeria_03_cursos'},
           {index: '07', url: 'galeria_03_cursos'},
    ]
}

But when I give the info to the component "GalleryGridItem" in the "GalleryGrid" function, the data doesn't contain the array of images. The data is as follow:

{
    "name": "Nuestros Fondos 2022",
    "url": "galeria_22_fishes",
    "number": 8,
    "interactive": true,
    "images": []
}

Any suggestion about what is happening?

CodePudding user response：

The JSON of images is invalid JSON. You need to add quotes to the keys.

CodePudding user response：

You are awaiting an array of promises. You need to use Promise.all()

await Promise.all(galleries.map( gal => (...))

Your function is returning immediately after .map, before any images are loaded.