reactjs - 来自 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 >

当我向网格容器添加“行”属性以尝试将它们显示在网格中时，这会使它们变得更糟：

  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 >