GraphQL中动态数据的材质UI卡渲染问题

Question

在我正在构建的GRANDstack应用程序中，我遇到了使用Material UI渲染卡片的问题。

当我用静态数据设置卡片时，它们会按预期呈现：

  const getMemsCard = (memID) => {
    return (
      <>
        <Grid item xs={12} sm={4} lg={4} key={memID}>
          <Card style={{ paddingTop: "5px" }}>
            <CardMedia
              className={classes.cardMedia}
              image={require('../img/historyHead.png')}
              style={{ width: "130px", height: "130px" }}
            />
            <CardContent className={classes.cardContent}>
              <Typography>Hi</Typography>
            </CardContent>
          </Card>
        </Grid>
      </>
    );
  };

<Grid container spacing={2} className={classes.memsGridContainer} >
  {getMemsCard()}
</Grid >

​

​

但是，当我使用来自GraphQL的动态数据设置它们时，它们是垂直渲染的，而不是在网格中：

  const getMemsCard = (memID) => {
    return (
      <>
        <Grid item xs={12} sm={4} lg={4} key={memID}>
          {data.Mem.map(memID => (
            <Card style={{ padding: "5px" }}>
              <CardMedia
                className={classes.cardMedia}
                image={require('../img/historyHead.png')}
                style={{ width: "130px", height: "130px" }}
              />
              <CardContent className={classes.cardContent}>
                {memID.mem}
                {memID.emoji}
              </CardContent>
            </Card>
          ))}
        </Grid>
      </>
    );
  };

<Grid container spacing={2} className={classes.memsGridContainer} >
  {getMemsCard()}
</Grid >

​

​

当我向网格容器添加一个"row“属性来尝试在网格中显示它们时，它会使它们变得更糟：

  const getMemsCard = (memID) => {
    return (
      <>
        <Grid container direction: "row" item xs={12} sm={4} lg={4} key={memID}>
          {data.Mem.map(memID => (
            <Card style={{ padding: "5px" }}>
              <CardMedia
                className={classes.cardMedia}
                image={require('../img/historyHead.png')}
                style={{ width: "130px", height: "130px" }}
              />
              <CardContent className={classes.cardContent}>
                {memID.mem}
                {memID.emoji}
              </CardContent>
            </Card>
          ))}
        </Grid>
      </>
    );
  };

<Grid container spacing={2} className={classes.memsGridContainer} >
  {getMemsCard()}
</Grid >

​

​

当我从GraphQL添加动态数据时，我想让卡片像处理静态数据一样显示。

Answer 1

您在网格项目中使用了{data.Mem.map(memID => ...)}，这就是它不能按预期呈现的原因。试试这个：

​

const getMemsCard = (memID) => {
  return data.Mem.map(memID => (
    <Grid item xs={12} sm={4} lg={4} key={memID}>
        <Card style={{ padding: "5px" }}>
          <CardMedia
            className={classes.cardMedia}
            image={require('../img/historyHead.png')}
            style={{ width: "130px", height: "130px" }}
          />
          <CardContent className={classes.cardContent}>
            {memID.mem}
            {memID.emoji}
          </CardContent>
        </Card>
    </Grid>
    ))
};

<Grid container spacing={2} className={classes.memsGridContainer} >
  {getMemsCard()}
</Grid >

​