我在这里需要帮助。我正在使用 Next.js 为朋友创建投资组合,而我要解决的问题是索引页面的初始页面加载。在我的本地/开发环境中,第一个初始页面加载会先呈现移动布局组件(参见下面的代码),然后再呈现桌面布局组件(一个错误)。现在,使用提供的链接将应用程序部署到托管服务器后 - https://chezportfolio-mdirmhphih.now.sh/ 该页面仅加载和维护不正确的移动布局。导航到其他路线并返回后,布局会自行更正。此外,我正在使用 React-Media 来根据媒体查询呈现特定组件。我不完全确定是什么触发了这个问题,但我猜是 Next 的 SSR 功能。
如果您需要进一步深入研究,下面列出了我的存储库的链接- 链接到回购
编辑:我仍然被困在这个问题上,在解决这个问题之前真的无法取得进一步进展。
export default class Index extends Component {
static async getInitialProps() {
const options = {
method: 'GET',
mode: 'cors'
};
const resources = await fetch(CLOUDINARY('chez').URL, options);
const imageData = await resources.json();
return {
imageData
};
}
componentDidMount() {
console.log(this.props);
}
render() {
const { url, imageData } = this.props;
const belowMaxWidth = () => {
return (
<Content maxWidth={300} margin={'120px auto'}>
<Images imageData={imageData} width={300} />
</Content>
);
};
const aboveMaxWidth = () => {
return (
<Content>
<Images imageData={imageData} width={200} />
</Content>
);
};
return (
<Layout href={url.pathname}>
<Media query="(max-width: 575px)" render={belowMaxWidth} />
<Media query="(min-width: 574px)" render={aboveMaxWidth} />
</Layout>
);
}
}