Next.js TypeError:无法对'；未定义'；或'；空'；

我正在尝试让下一个名为“With Apollo Auth”的.js示例正常工作：

我设置了所有设置，但我得到了错误：

TypeError: Cannot destructure property `req` of 'undefined' or 'null'.

const { AppTree, ctx: { req, res }} = ctx <----- Error line

TypeError:无法对“undefined”或“null”的属性“req”进行解构。
常量{AppTree，ctx:{req，res}}=ctx{
返回数据扩展为React.Component的类{
//这是更好的devtools体验所必需的。请检查react devtools如何显示它：“MyApp WithData”
静态displayName=`WithData（${App.displayName}）`
//由于apolloState是必需的，但在该方法返回新道具之前，它会丢失，
//因此需要提供默认值
静态defaultProps={
阿波罗州：{}
}
静态类型={
阿波罗状态：PropTypes.object.isRequired
}
静态异步getInitialProps（ctx）{
常量{AppTree，ctx:{req，res}}=ctx
康斯特阿波罗(
{},
{
getToken:（）=>parseCookies（req）.token
}
)
ctx.ctx.apollo客户端=阿波罗
设appProps={}
如果（应用程序getInitialProps）{
appProps=等待App.getInitialProps（ctx）
}
如果（res&&res.finished）{
//重定向时，响应完成。
//继续渲染没有意义
返回{}
}
如果（窗口类型===‘未定义’）{
//运行组件树中的所有graphql查询
//并提取结果数据
试一试{
//运行所有GraphQL查询
等待getDataFromTree（）
}捕获（错误）{
//防止Apollo客户端GraphQL错误导致SSR崩溃。
//通过data.error prop在组件中处理它们：
// https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-查询数据错误
console.error（'运行'getDataFromTree'时出错，错误）
}
//getDataFromTree不调用componentWillUnmount
//因此，需要手动清除头部副作用
头。倒带（）
}
//从阿波罗商店提取查询数据
const apolloState=apollo.cache.extract（）
返回{
…appProps，
阿波罗州
}
}
建造师（道具）{
超级（道具）
//`getDataFromTree`首先呈现组件，客户端作为属性传递。
//之后，使用Next的正常渲染管道完成渲染
//@ts忽略
this.apolloClient=initApollo（props.apolloState{
getToken:（）=>{
//@ts忽略
返回parseCookies（）.token
}
})
}
渲染（）{
//@ts忽略
返回
}
}
}

---

我不知道为什么ctx没有定义

您的解构错误，请修复以下问题

const{AppTree，req，res}=ctx

import initApollo from './initApollo'

function parseCookies (req, options = {}) {
  return cookie.parse(req ? req.headers.cookie || '' : document.cookie, options)
}

export default App => {
  return class WithData extends React.Component {
    // It is needed for better devtools experience. Check how react devtools shows it: "MyApp WithData"
    static displayName = `WithData(${App.displayName})`

    // Since apolloState is required but it is missed before this method returns the new props,
    // so it is needed to provide defaults
    static defaultProps = {
      apolloState: {}
    }

    static propTypes = {
      apolloState: PropTypes.object.isRequired
    }

    static async getInitialProps (ctx) {
      const { AppTree, ctx: { req, res }} = ctx
      const apollo = initApollo(
        {},
        {
          getToken: () => parseCookies(req).token
        }
      )

      ctx.ctx.apolloClient = apollo

      let appProps = {}
      if (App.getInitialProps) {
        appProps = await App.getInitialProps(ctx)
      }

      if (res && res.finished) {
        // When redirecting, the response is finished.
        // No point in continuing to render
        return {}
      }

      if (typeof window === 'undefined') {
        // Run all graphql queries in the component tree
        // and extract the resulting data
        try {
          // Run all GraphQL queries
          await getDataFromTree(<AppTree {...appProps} apolloClient={apollo} />)
        } catch (error) {
          // Prevent Apollo Client GraphQL errors from crashing SSR.
          // Handle them in components via the data.error prop:
          // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
          console.error('Error while running `getDataFromTree`', error)
        }

        // getDataFromTree does not call componentWillUnmount
        // head side effect therefore need to be cleared manually
        Head.rewind()
      }

      // Extract query data from the Apollo's store
      const apolloState = apollo.cache.extract()

      return {
        ...appProps,
        apolloState
      }
    }

    constructor (props) {
      super(props)
      // `getDataFromTree` renders the component first, the client is passed off as a property.
      // After that rendering is done using Next's normal rendering pipeline
      // @ts-ignore
      this.apolloClient = initApollo(props.apolloState, {
        getToken: () => {
          // @ts-ignore
          return parseCookies().token
        }
      })
    }

    render () {
      // @ts-ignore
      return <App apolloClient={this.apolloClient} {...this.props} />
    }
  }
}