问next.js不会让我回来的
EN

Stack Overflow用户

提问于 2022-07-04 02:41:08

回答 1查看 249关注 0票数 1

关于这个问题的背景情况，我的代码在运行dev中运行良好，使用if-else语句，但是在run中构建if- of不起作用，所以现在我正在尝试有条件地呈现页面的新方法。这是最有希望的，但是内部的返回语句不起作用。有解决办法吗？如果我用console.log替换它，它会将文本返回到控制台，因此它与承诺有关。

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 p = new Promise((resolve, reject) => {
        let address = useAddress();
        if (address) {
            resolve(address)
        } else {
            console.log('no addy')
            reject()
        }
    })
    
    p.then((address) => {
        return (
            <>
                <Head>
                    <title>DRUMM3R</title>
                    <link rel="icon" href="/drum.svg" />
                </Head>
                <Username address={address} />
            </>
        );
    }).catch(() => {
        return (
            <>
                <Head>
                    <title>DRUMM3R</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;

javascript

next.js

回答 1

Stack Overflow用户

发布于 2022-07-04 02:53:43

问题不在Next，它的React期望返回一个有效的JSX元素。您的函数不返回任何内容，隐式返回未定义的内容，这将导致中断。

因此，您需要做的要么是具有某种类型的效果(如果您正在执行某种异步操作)，然后将setState并呈现适当的元素(加载指示符、错误消息或数据等)，要么您需要已经有该数据供组件呈现。

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 = () => {
  const address = useAddress();

  return address ? (
<>
  <Head>
    <title>DRUMM3R</title>
    <link rel="icon" href="/drum.svg" />
  </Head>
  <Username address={address} />
</>
  ) : (
<>
  <Head>
    <title>DRUMM3R</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>
</>
  );
};

你可以做这样的事，它应该能起作用。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72851290

复制

相似问题

问next.js不会让我回来的
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问next.js不会让我回来的EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问next.js不会让我回来的
EN