循环循环 React Material UI Javascript答案

【问题标题】：Loop through loop React Material UI Javascript循环循环 React Material UI Javascript
【发布时间】：2020-08-19 17:53:03
【问题描述】：

大家好，我现在不知道为什么这段代码不起作用，我想迭代一个对象（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>

谢谢大家！

【问题讨论】：

标签： javascript reactjs react-router material-ui react-hooks

【解决方案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}
      />
    );
  });

【讨论】：

【解决方案2】：

我建议您编写一个函数并返回您的 CardHeader，然后您可以尝试在那里编写循环；

循环{ 返回（卡片 ) }

我猜这会行得通，我主要在函数中渲染我的组件。

注意安全：）

【讨论】：

【解决方案3】：

forEach 不返回任何内容，您必须使用 .map 并返回 <CardHeader> 组件。为了让你的组件被重新渲染，它们必须从循环内部返回

 {
    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}
      />


    })
}

【讨论】：