Next.JS：如何处理 getInitialProps 中的错误？

Question

我想从 API 获取数据，如果失败，我希望它呈现_error.js页面。我的请求取决于路由器查询。因此，如果用户输入错误的查询，页面将引发错误。

如果请求因抛出而失败，我希望_error.js显示我的自定义。

我如何实现这一目标？

这是我的索引页：

// pages/index.js

import React from 'react'
import PropTypes from 'prop-types'
import fetch from 'isomorphic-unfetch'
import Items from '../components/Items'
import { API } from '../utils/config'

const IndexPage = ({ items }) => {
  return (
    <div>
      <Items items={items} />
    </div>
  )
}

IndexPage.getInitialProps = async (context) => {
  const { query } = context
  const filter = query.filter || ''
  const name = query.name || ''
  const page = query.page || 1
  const response = await fetch(
    `${API}?${filter}=${name}&page=${page}`,
  )
  const data = await response.json()
  return {
    items: data.items,
  }
}

export default IndexPage

我的 _app 文件：

// pages/_app.js

import React from 'react'
import Router from 'next/router'
import Page from '../components/Page'

const MyApp = (props) => {
  const { Component, pageProps } = props
  return (
    <Page>
      <Component
        items={pageProps.items}
        query={pageProps.query}
        statusCode={pageProps.statusCode}
      />
    </Page>
  )
}

export default MyApp

Answer 1

尝试根据错误进行条件渲染，因此如果发生错误，items请将null

  const IndexPage = ({ items }) => {

      return (
      {items===null ? <Fragment>
         <ErrorPage />
     </Fragment> : <div>
          <Items items={items} />
        </div> } 
      )
    }

并在getInitialProps

IndexPage.getInitialProps = async (context) => {
  try{
  const { query } = context
  const filter = query.filter || ''
  const name = query.name || ''
  const page = query.page || 1
  const response = await fetch(
    `${API}?${filter}=${name}&page=${page}`,
  )
  const data = await response.json()
  return {
    items: data.items,
  }
 }catch(error){
    return {
    items: null
  } 
 }
}