动态渲染组件的背景图像未出现在第一次渲染时

Question

编辑：我通过在 Home 函数中动态导入 <Card> 组件来解决此问题：

 const Card = dynamic(() => import("@material-ui/core/Card"), {
    loading: () => <div>Loading...</div>,
  });

---

由于某种原因，当我使用背景图像（<CardMedia> 组件）动态渲染 Material UI 卡片时，图像不会出现在第一次渲染中。当我刷新页面时，它们也没有显示。

但是，当通过npm run dev 重建页面时（修改并保存文件后），图像似乎只会在页面再次刷新时消失！

如果我将源代码用作<img>，它们会出现在第一次渲染和随后的刷新中。所以它必须与 Material UI 或背景图像的 SSR 有关。

有人有想法吗？

PS。它与 Apollo 无关，我使用的是从我的目录中的 JSON 文件导入的数据。

import Layout from "../components/Layout";
import Head from "next/head";
import Link from "next/link";
import items from "../seeds";
import { makeStyles } from "@material-ui/core/styles";
import { withApollo } from "../lib/apollo";
import { useQuery } from "@apollo/react-hooks";

//GQL
import gql from "graphql-tag";

//CARD IMPORTS
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";

//CARD STYLES
const useStyles = makeStyles({
  card: {
    maxWidth: "100%",
    width: 270,
    margin: "1rem",
    textAlign: "center",
  },
  media: {
    height: 0,
    paddingTop: "56.25%",
  },
});

const HELLO_QUERY = gql`
  query HelloQuery {
    sayHello
  }
`;

function Home() {
  const classes = useStyles();
  const MAX_LENGTH = 125;

  const { data, loading, error } = useQuery(HELLO_QUERY);

  if (loading) {
    return <div />;
  }
  console.log(data);

  return (
    <div>
      <Layout>
        <Typography variant="h2" align="center">
          {data.sayHello}
        </Typography>
        <Link href="/about">
          <a>About</a>
        </Link>
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: "center",
          }}
        >
          {items.map((item: any) => {
            return (
              <Card className={classes.card} key={item._id}>
                <CardActionArea>
                  <Link href={`/event/${item._id}`}>
                    <CardMedia
                      wide
                      className={classes.media}
                      image={item.image}
                      title={`${item.name} image`}
                    />
                  </Link>
                  <CardContent>
                    <Typography gutterBottom variant="h5" component="h2">
                      {item.name}
                    </Typography>
                    <Typography
                      variant="body2"
                      color="textSecondary"
                      component="p"
                    >
                      {`${item.description.substring(0, MAX_LENGTH)}...`}
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Card>
            );
          })}
        </div>
      </Layout>
    </div>
  );
}

export default withApollo(Home);

Answer 1

我通过在 Home 函数中动态导入 <Card> 组件来解决此问题：

 const Card = dynamic(() => import("@material-ui/core/Card"), {
    loading: () => <div>Loading...</div>,
  });

Answer 2

这可能有多种原因，因为我们看不到查询的有效负载，所以很难预测

一些需要调试的地方： 1.你的反应是否一致

1. 我将您的使用与我的一个项目实现进行了比较，我这边唯一的补充是在 CardMedia 中指定 component={'img'}

2. 此外，除了将代码包装在 link 中之外，是否可以按照此处的建议使用 cardActions API - How to make the whole Card component clickable in Material UI using React JS?