L oop через l oop Реагирующий материал UI Javascript

Question

Привет, ребята, я теперь не понимаю, почему этот код не работает. Я хочу перебрать объект (paleogenome.data) и создать CardHeader для каждого:

              {
              Object.keys(paleogenome.data).forEach(function (key){

                console.log(paleogenome.data[key].NAME); //PRINT WORKS FINE
                console.log(paleogenome.data[key].FULL_NAME); //PRINT WORKS FINE

                <CardHeader
                  avatar={
                    <Avatar aria-label="recipe" className={classes.avatar}>
                      R
                    </Avatar>
                  }
                  action={
                    <IconButton
                      href={`/buscador?` + paleogenome.data[key].NAME}
                    >
                      <ArrowForwardIcon />
                    </IconButton>
                  }
                  title={paleogenome.data[key].NAME}
                  subheader={paleogenome.data[key].FULL_NAME}
                />


              })
             }

            </Card>
          </Grid>

Спасибо, ребята!

Answer 1

forEach ничего не возвращает, используйте вместо него map:

Object.keys(paleogenome.data).map(key => {
    return (
      <CardHeader
        avatar={
          <Avatar aria-label="recipe" className={classes.avatar}>
            R
          </Avatar>
        }
        action={
          <IconButton href={`/buscador?` + paleogenome.data[key].NAME}>
            <ArrowForwardIcon />
          </IconButton>
        }
        title={paleogenome.data[key].NAME}
        subheader={paleogenome.data[key].FULL_NAME}
      />
    );
  });

Answer 2

forEach ничего не возвращает, вы должны использовать .map и вернуть компонент <CardHeader>. Чтобы компоненты были повторно отрисованы, они должны быть возвращены изнутри al oop

 {
    Object.keys(paleogenome.data).map(function (key){

      console.log(paleogenome.data[key].NAME); //PRINT WORKS FINE
      console.log(paleogenome.data[key].FULL_NAME); //PRINT WORKS FINE

      return <CardHeader
        avatar={
          <Avatar aria-label="recipe" className={classes.avatar}>
            R
          </Avatar>
        }
        action={
          <IconButton
            href={`/buscador?` + paleogenome.data[key].NAME}
          >
            <ArrowForwardIcon />
          </IconButton>
        }
        title={paleogenome.data[key].NAME}
        subheader={paleogenome.data[key].FULL_NAME}
      />


    })
}

Answer 3

Я бы порекомендовал вам написать функцию и вернуть свой CardHeader, и вы можете попытаться написать свой l oop там, например:

loop {return (card)}

, который бы работать, думаю, в основном мои компоненты отображаются в функциях.

Будьте осторожны, пока :)