我如何在反应中创建条件加载消息答案

【问题标题】：How do i create a conditional loading message in react我如何在反应中创建条件加载消息
【发布时间】：2021-10-13 04:05:33
【问题描述】：

我这里有一个反应代码我想从 API 加载数据，但获取数据需要时间，因此我的函数失败了我如何设置它应该在渲染之前等待数据

import Head from 'next/head'
import Link from 'next/link'
import Navbar from './Navbar'
import Template from './Template'
import { useState, useEffect } from 'react'

export async function getStaticProps() {
    const response = await fetch('https://peegin.com/api/public/peegins/recent')
    const data = await response.json()

    return {
        props: { data }
    }
}

const Home = ({ data }) => {



    return (
        <div className="content">
            <Head>
                <title>Peegin Recent</title>
            </Head>
            <Navbar />
            {title}
            {data.map(peegin => (
                <div className="preview" key={peegin.permalink}>
                    <h3 className="title">
                        {peegin.title}
                    </h3>
                    <p>{peegin.meaning}</p>
                    <p className="example">Example</p>
                    <p className="example-content">{peegin.example}</p>
                    <p className="origin">Origin: {peegin.origin}</p>
                    <div className="name">
                        <h4>By</h4> &nbsp; <h4 className="namegreen">{peegin.user.name}</h4> &nbsp; <h4>{peegin.created_at}</h4>
                    </div>
                    <p className="views">{peegin.views.view} Views</p>
                </div>
            ))}
        </div>
    );
}

export default Home;

【问题讨论】：

标签： reactjs next.js conditional-statements get-request getstaticprops

【解决方案1】：

const Home = ({ data }) => {

    // add this as fallback
    if(!data){
      return <h1>Loading..<h1/>
    }

    return (
        <div className="content">
            <Head>
                <title>Peegin Recent</title>
            </Head>
            <Navbar />
            {title}
            // add this to check for data first then do map
            {data && data.map(peegin => (
                <div className="preview" key={peegin.permalink}>
                    <h3 className="title">
                        {peegin.title}
                    </h3>
                    <p>{peegin.meaning}</p>
                    <p className="example">Example</p>
                    <p className="example-content">{peegin.example}</p>
                    <p className="origin">Origin: {peegin.origin}</p>
                    <div className="name">
                        <h4>By</h4> &nbsp; <h4 className="namegreen">{peegin.user.name}</h4> &nbsp; <h4>{peegin.created_at}</h4>
                    </div>
                    <p className="views">{peegin.views.view} Views</p>
                </div>
            ))}
        </div>
    );
}

【讨论】：

数据变量最初持有什么？
它什么都没有
你能重新创建codesandbox.io中的组件吗？