I'm running ReactJS, using React.UseState and UseEffects.

I receive a large amount of data via a Web Service ( 400 rows). To organize this data I use _.groupBy from lodash. But I can't use its data in a .map, hence the error in the title of my question. I understand that this is a fairly common error and after testing some solutions, the problem persists :/

Here is my code itself:

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

const [appliNom, setAppliNom] = useState([]);

const loadRessources = () => {
  axios.get(ENV.HOST_NAME   "/system/"   encrypt("env?request=resources&token="   getSystemToken(), "SYS", ""))

        .then((response) => {
            
            //console.log(response.data)
            const groupeNom = _.groupBy(response.data, nom => nom.appli);
            setAppliNom(groupeNom);
            console.log(groupeNom);
            
        })
        .catch((error) => console.log(error));
    }
    

    useEffect(() => {
        loadRessources();
    }, [])
    
    return (
                {console.log(appliNom)}
            <Grid item className={classes.Body}>
                <Grid container className={classes.GridContainerBody}>
                    {appliNom.map((item, index) => (
                        <div className={classes.DivContainerBody}>
                            <Grid item className={classes.GridItemLeftBody}>
                                <Accordion key={index} className={classes.AccordionBody}>
                                    <AccordionSummary expandIcon={<IconButton className={classes.ButtonBodyShow} disableRipple={true}><ExpandMoreIcon/></IconButton>}>
                                        <Typography>
                                            {appliNom}
                                        </Typography>
                                    </AccordionSummary>
                                    <AccordionDetails>
                                            <Typography>
                                                Information
                                            </Typography>
                                    </AccordionDetails>
                                </Accordion>
                            </Grid>

                            <Grid item className={classes.GridItemRightbody}>
                                <div>
                                    <Tooltip title="Mot de passe" placement="top" arrow>
                                        <IconButton 
                                            className={classes.ButtonHeader}
                                            disableRipple={true}
                                        >
                                            <LockIcon/>
                                        </IconButton>
                                    </Tooltip>
                                </div>
                                <div>
                                    <Tooltip title="Télécharger doc
                                    " placement="top" arrow>
                                        <IconButton 
                                            className={classes.ButtonHeader}
                                            disableRipple={true}
                                        >
                                            <GetAppIcon/>
                                        </IconButton>
                                    </Tooltip>
                                </div>
                            </Grid>
                        </div>
                    ))}
                </Grid>
            </Grid>
           )

Then here is what my console.log show me:

Object { undefined: (130) […], Application1: (2) […], Application2: (16) […], Application3: (18) […], Application4: (8) […], Application5: (39) […], Application6: (71) […], Application7: (9) […], "Application8": (35) […], Application9: (104) […], … }

Application1 : Array [ {...}, {...} ]
Application2 : Array [ {...}, {...} ]
Application3 : Array [ {...}, {...} ]

Application 4: 
  0: Object {uri: "/api/...", descr: "DescriptionAPI" ...}
  1: Object {uri: "/api/...", descr: "DescriptionAPI" ...}

If I understand correctly, this is not an array so the .map will not work. Maybe also the undefined is a problem, I don't know, the returned data looks more like a dump than anything else...

I'm trying to reproduce something like this for my interface

1. Application 1

   -- API 1

   --- Description ...

   -- API 2

   --- Description ...

2. Application 2

-- API...

CodePudding user response：

try to use Object.values(AppliNom).map but its just a guess

CodePudding user response：

First, you can check to loop and ask only if the value is not undefined, like:

{appliNom.map((item, index) => { **item?.data** this shortcut or you can just ensure with if statement. for example... and rest of your code

Secondly, maybe try to run over - Object.keys(array).map((key)) => () to convert from object of objects to array of objects. then you can loop through the array. Lastly, you are looping through the state, on every iteration you are using the whole state inside the Typography attribute.