2

我在这里需要帮助。我正在使用 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>
        );
      }
    }
4

0 回答 0