next.js 代码在运行开发中工作，但不运行构建

Question

问题在于运行开发中的 useAddress() 功能，当控制台记录时它返回未定义的未定义然后地址，但是在运行构建/启动中它只返回未定义。 我该如何解决这个问题。

 import { useAddress } from "@thirdweb-dev/react"; import Head from 'next/head'; import Link from 'next/link'; import Username from '../components/Username'; import React from "react"; const Home = () => { let address = useAddress(); console.log(address) if (address) { return ( <> <Head> <title>home</title> <link rel="icon" href="/drum.svg" /> </Head> <Username address={address} /> </> ); } else { return ( <> <Head> <title>home</title> <link rel="icon" href="/drum.svg" /> </Head> <Link href="/"> <a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2">click here to log in</a> </Link> </> ); } } export default Home;

Answer 1

React 中的命令式代码太不可预测了。 您应该改用useEffect(()=>{console.log(address)},[]) ，它在两种设置中的工作方式可能相同。

Answer 2

我希望这有效：

import { useAddress } from "@thirdweb-dev/react";
import Head from 'next/head';
import Link from 'next/link';
import Username from '../components/Username';
import React, {useState, useEffect} from "react";

const Home = () => {
    const [address, setAddress] = useState(false)

    useEffect(()=> {
        setAddress(useAddress())
    }, [])

   
    
        if (address) {
            return (
                <>
                    <Head>
                        <title>home</title>
                        <link rel="icon" href="/drum.svg" />
                    </Head>
                    <Username address={address} />
                </>
            );
        } else {
            return (
                <>
                    <Head>
                        <title>home</title>
                        <link rel="icon" href="/drum.svg" />                
                    </Head>
                    <Link href="/">
                    <a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2">click here to log in</a>
                    </Link>
                </>
            );
        }
}

export default Home;

next.js 代码在运行开发中工作，但不运行构建

问题描述

2 个解决方案

解决方案1
0 2022-07-05 19:44:11

解决方案2
0 2022-07-05 20:50:48

next.js 代码在运行开发中工作，但不运行构建

问题描述

2 个解决方案

解决方案1 0 2022-07-05 19:44:11

解决方案2 0 2022-07-05 20:50:48

解决方案1
0 2022-07-05 19:44:11

解决方案2
0 2022-07-05 20:50:48