【发布时间】：2020-09-08 17:49:25
【问题描述】：
你好美丽的人们，
我的 NextJS 和 Ant-design 应用程序需要帮助。
目前的问题只发生在stagging & production 环境中，我无法在本地重现它，也无法通过运行：
npm run dev- 也不是
npm run build and npm run start
Here 是临时链接，该问题仅在页面第一次加载和硬刷新时发生。
问题
我有一个
LayoutWrapper组件，它显示导航栏、主要内容和页脚。在下面的这段代码中，我使用的是useBreakpoint()来自 ant-design 的钩子，用于响应 导航栏。但它第一次显示整个页面就像 移动，然后几秒钟后，页面返回桌面 版本。硬刷新浏览器后也会出现同样的问题。
我意识到一些 CSS 和 JS 包需要时间来加载。导致这种行为。
布局组件如下所示：
const LayoutWrapper: React.FC<Props> = ({
baseUrl,
title,
image,
description,
isHome = false,
isError = false,
isCause = false,
isCategory = false,
isCreate = false,
noFooter = false,
isForm = false,
children,
}) => {
const { svpProps } = React.useContext(Context);
const router = useRouter();
const screens = useBreakpoint();
const [scrolled, setScrolled] = React.useState("");
const user = useSelector((state: IRootState) => state.user);
const dispatch = useDispatch();
const scrollHandler = () => {
setScrolled(
window.pageYOffset > 640
? "over"
: window.pageYOffset > 80
? "scrolled"
: "",
);
};
React.useEffect(() => {
window.addEventListener("scroll", scrollHandler);
}, [scrollHandler]);
React.useEffect(() => {
if (user.currentUser.isLoggedin && _.isEmpty(user.currentUser.data)) {
getCurrentUser(dispatch);
}
}, [dispatch]);
const _url = `${getPlatformUrl()}${router.asPath}`;
const _description = description || "More Than A Crowdfunding Platform";
const _siteName = "Save Plus";
const _author = "Exuus";
const _image = image || `${getPlatformUrl()}/images/get-started.png`;
const _title = title || "";
const _twitterHandle = "@SavePlusHQ";
return (
<Layout className={styles.layout}>
<Head>
{svpProps.error || user.currentUser.error.message ? (
<title>Error | {_siteName}</title>
) : (
<title>
{title ? `${_title} | ` : ""}
{_siteName}
</title>
)}
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="canonical" href={_url} />
<meta name="description" content={_description} />
<meta property="og:type" content="website" />
<meta property="og:site_name" content={_siteName} />
<meta property="og:title" content={_title} />
<meta property="og:image" content={_image} />
<meta property="og:description" content={_description} />
<meta property="og:url" content={_url} />
{!isCause && <meta name="twitter:site" content={_twitterHandle} />}
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={_title} />
<meta name="twitter:description" content={_description} />
<meta name="twitter:image" content={_image} />
<meta name="author" content={_author} />
<link
id="favicon"
rel="shortcut icon"
href="/icons/favicon-32x32.png"
sizes="16x16 32x32 48x48"
type="image/png"
/>
</Head>
{screens.lg ? (
<Header
scrolled={scrolled}
isCategory={isCategory}
user={user}
isHome={isHome}
isCreate={isCreate}
svpProps={svpProps}
baseUrl={baseUrl}
/>
) : (
<MobileHeader
scrolled={scrolled}
isCategory={isCategory}
user={user}
isHome={isHome}
isCreate={isCreate}
svpProps={svpProps}
baseUrl={baseUrl}
/>
)}
{svpProps.error || user.currentUser.error.message ? (
<Content className={styles.layout__content} data-is-form="true">
<Result
status="500"
title="Oooops!"
subTitle={
<>
Sorry, something went wrong.
<br />
{svpProps.error || user.currentUser.error.message}
</>
}
extra={
<>
<Button
type="primary"
onClick={() => router.push("/")}
icon={<HomeOutlined />}
/>
<Button onClick={() => router.reload()}>RELOAD</Button>
</>
}
/>
</Content>
) : (
<Content
className={styles.layout__content}
data-is-category={isCategory}
data-is-form={isForm}
data-is-error={isError}
>
{children}
</Content>
)}
{!noFooter && (
<Footer className={styles.layout__footer}>
<FooterItem />
</Footer>
)}
</Layout>
);
};
export default LayoutWrapper;
我的 __app.js 文件如下所示：
import React from "react";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { Router } from "next/router";
import { withRedux } from "helpers/with-redux-store";
import getInitialProps from "helpers/getInitialProps";
import Context from "helpers/context";
import "react-image-crop/dist/ReactCrop.css";
import "theme/index.css";
import "theme/global.scss";
import "styles/global.scss";
Router.events.on("routeChangeStart", () => NProgress.start());
Router.events.on("routeChangeComplete", () => {
window.scroll({
top: 0,
left: 0,
});
NProgress.done();
});
Router.events.on("routeChangeError", () => NProgress.done());
const MyApp = ({ Component, pageProps, svpProps }) => {
return (
<Context.Provider value={{ svpProps }}>
<Component {...pageProps} svpProps={svpProps} />
</Context.Provider>
);
};
MyApp.getInitialProps = getInitialProps;
export default withRedux(MyApp);
这是我使用 LESS 加载 ant-design 样式的方式
@import '../../node_modules/antd/lib/style/themes/default.less';
@import '../../node_modules/antd/dist/antd.less';
@import './theme.less';
我有一个将 LESS 主题编译为 CSS 的脚本
"build-css": "less-watch-compiler --run-once --enable-js --main-file=index.less theme/less/ theme/",
结果 theme/index.css 包含在我的__app.js 中，如上面的 sn-p 所示
自从我的队友开始使用此脚本部署应用程序后，我就意识到了这个问题
sudo git pull origin develop && sudo yarn install && sudo yarn build && sudo pm2 restart all"
我真的不知道如何修复这个奇怪的错误，因为它不会在本地发生
【问题讨论】：
标签： reactjs typescript next.js antd