javascript 部署到Vercel时，组件在页眉中的呈现不正确

我的NextJS应用程序在localhost上渲染得很好，但是当我部署到Vercel时，基于状态并且应该隐藏的模态正在渲染。同样值得注意的是，模态是在标题中呈现的，而不是在中心屏幕中。同样，这些都不是本地主机上的问题。
How header looks in localhost.
How modal should look when open.
How it renders when deployed to Vercel.
下面是header组件的代码：

import { ConnectButton } from "web3uikit"
import Link from "next/link"
import ProceedsModal from "./ProceedsModal"
import SellModal from "./SellModal"
import { useState } from "react"

export default function Header() {
    const [showProceedsModal, setShowProceedsModal] = useState(false)
    const hideProceedsModal = () => {
        setShowProceedsModal(false)
    }
    const [showSellModal, setShowSellModal] = useState(false)
    const hideSellModal = () => {
        setShowSellModal(false)
    }

    function handleClick() {
        setShowProceedsModal(true)
    }

    function handleClick2() {
        setShowSellModal(true)
    }

    return (
        <nav className="p-2 border-b-2 border-neutral-300 flex flex-col md:flex-row justify-between items-center">
            <h1 className="flex flex-row py-2 px-4 items-center text-5xl text-gray-600 font-audiowide">
                <a href="/">
                    <img
                        className="min-w-[100px] min-h-[100px] hover:scale-125"
                        src="./kennel-club.svg"
                    />
                </a>
                Kennel Club NFTs
            </h1>
            <div className="flex flex-col md:flex-row items-center font-sourceCodePro">
                <Link href="/" className="mr-2 p-4 hover:scale-125 hover:text-blue-600">
                    Home
                </Link>
                <Link href="/browseNfts" className="mr-2 p-4 hover:scale-125 hover:text-blue-600">
                    Browse NFTs
                </Link>
                <div
                    className="cursor-pointer mr-2 p-4 hover:scale-125 hover:text-blue-600"
                    onClick={handleClick2}
                >
                    Sell NFTs
                </div>
                <div
                    className="cursor-pointer mr-2 p-4 hover:scale-125 hover:text-blue-600"
                    onClick={handleClick}
                >
                    Proceeds
                </div>
                <div>
                    <ProceedsModal onClose={hideProceedsModal} isVisible={showProceedsModal} />
                </div>

                <div>
                    <SellModal onClose={hideSellModal} isVisible={showSellModal} />
                </div>
                <ConnectButton moralisAuth={false} />
            </div>
        </nav>
    )
}

下面是Header在my _app中的位置。js：

import "../styles/globals.css"
import { MoralisProvider } from "react-moralis"
import Head from "next/head"
import { NotificationProvider } from "web3uikit"
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client"
import Header from "../components/Header"

const client = new ApolloClient({
    cache: new InMemoryCache(),
    uri: process.env.NEXT_PUBLIC_SUBGRAPH_URL,
})

function MyApp({ Component, pageProps }) {
    return (
        <div>
            <Head>
                <title>{"Kennel Club NFTs"}</title>
                <meta name="description" content="Kennel Club NFTs" />
                <link rel="icon" href="/kennel-club.svg" />
            </Head>
            <MoralisProvider initializeOnMount={false}>
                <ApolloProvider client={client}>
                    <NotificationProvider>
                        <Header />
                        <Component {...pageProps} />
                    </NotificationProvider>
                </ApolloProvider>
            </MoralisProvider>
        </div>
    )
}

export default MyApp

我尝试将相关的'useState'钩子移动到_app。js并没有解决这个问题。我还尝试在单个页面上呈现Header组件，而不是_app。js，但这也没有解决问题。
感谢任何读到这篇文章的人。非常感谢你的帮助。

这是下一个构建过程之后的服务器端渲染问题。问题是我正在使用的UI工具包使用了样式化的组件，因此，我不得不更新我的下一个。config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    images: {
        loader: "akamai",
        path: "/",
    },
    compiler: {
        styledComponents: true,
    },
}

module.exports = nextConfig

我的_documentjs：

import Document from "next/document"
import { ServerStyleSheet } from "styled-components"

export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const sheet = new ServerStyleSheet()
        const originalRenderPage = ctx.renderPage

        try {
            ctx.renderPage = () =>
                originalRenderPage({
                    enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
                })

            const initialProps = await Document.getInitialProps(ctx)
            return {
                ...initialProps,
                styles: [initialProps.styles, sheet.getStyleElement()],
            }
        } finally {
            sheet.seal()
        }
    }
}

javascript 部署到Vercel时，组件在页眉中的呈现不正确

1条答案

相关问题

热门标签

最新问答