从getInitialProps返回内容时，是否有检查空的方法？

Posted 2021-03-27

我是React＆NextJS的新手，来自php语言。这对我来说非常有趣和令人兴奋 - 但还未能掌握这一部分。

你能在getInitialProps中检查空吗？例如，如果API关闭或API未返回任何结果，则显示错误消息？

原谅我发布我的代码，但这里是......

import App, { Container } from 'next/app';
import Layout from '../components/Layout'; 
import Footer from '../components/Footer';
import 'isomorphic-fetch'; // Library for fetching data 
import Link from 'next/link';
import {Jumbotron, Button, Row} from 'reactstrap';

export default class Index extends React.Component {
  static async getInitialProps() {

        // Connect to the API
        const ApiResponse = await fetch('http://localhost:1337/mods')

       // Store the data fetched from ApiResponse
       const ModsData = await ApiResponse.json()

        // return mods (first is table name in API, second is the ModsData variable above where we store the json data)
        return {
          mods: ModsData

        }


  }
  render() {
    return <Layout>



     <span style={{borderBottom: '1px solid #ccc', paddingBottom: '5pt', marginTop: '5pt'}}>

     <h4 style={{paddingTop: '10pt'}}>Showing all mods</h4>
     </span>

      <ul className="list-group" style={{paddingTop: '10pt'}}> 
        {this.props.mods.map(Mod => // Get our mods & loop over them
       <li className="list-group-item" key={Mod.id}>
        <Link as={`/mods/${Mod.id}`} prefetch href={`/mods/id=${Mod.id}`}><a>

        {Mod.name}</a></Link>
        {Mod.description}

        </li>

        )}
        </ul>
    </Layout>
  }
}

答案

只需添加另一个道具noData，并检查ModsData是否返回任何东西，如果没有添加noData: true其他noData: false

    static async getInitialProps() {
        let noData = false
        // Connect to the API
        const ApiResponse = await fetch('http://localhost:1337/mods').then((value) => {
            if(!value) noData = true;
        }).catch(err => {
            noData = true;
        })

       // Store the data fetched from ApiResponse
       const ModsData = await ApiResponse.json()

        // return mods (first is table name in API, second is the ModsData variable above where we store the json data)
        return {
          mods: ModsData,
          noData
        }
  }

 render(){
      if(this.props.noData) return <h1>No Data</h1>

      //return other code
  }

另一答案

尝试和捕获是完美的这个权利？如果错误，您可以将error设置为道具的一部分